... 跳转到主要内容 跳转到页脚
  • Bricks建站教程
  • B2B建站模版
  • SEO教程
  • 购买清单
  • 博客
  • 关于
  • Bricks建站教程
  • B2B建站模版
  • SEO教程
  • 购买清单
  • 博客
  • 关于

Bricks元素的悬停样式设置

作者:Sharon发布日期 :2024年5月6日更新日期:2024年5月10日标签:Bricks Builder
  • Bricks使用教程
文章目录

Bricks元素的悬停样式是通过伪类实现的,他可以通过切换或添加伪类来实现不同状态下的元素样式。

操作也非常简单,我们以最常用的按钮元素为例:

在页面中添加一个按钮元素,并设置好默认状态下的按钮样式。

Bricks元素的悬停样式设置

在选中按钮元素的情况下,点击伪类按钮。

点击之后在伪类框中选择【:hover】伪类(注意这里默认可选的一般3个,你可以根据自己的需求添加伪类并使用)。

选中hover伪类之后的状态如下图。

在此状态下切换到按钮的Style修改和设置的样式都是鼠标悬停之后的样式。

1)设置鼠标悬停之后,按钮背景为黑色,文字为白色

2)设置鼠标悬停之后,按钮向上浮动效果

设置浮动的速度为0.5s

最终效果如下:

温馨提示:本站视频来自YouTube无法访问YouTube则无法观看本站的视频。
分享:
上一篇

如何在古腾堡编辑器中设置图片点击放大?

下一篇

Fancy Animations—Bricks Builder 的精美动画组件

文章目录
想要快速的拥有一个专业的外贸独立站?
我们可以为你提供专业的外贸独立站建设服务,你只需要提供你的想法和素材,一切交给我们!

扫一扫企业微信联系我咨询建站服务! 

  • YouTube主页
  • Bricks Builder中文交流小组

本站由Cloudways主机和WordPress Bricks主题驱动!

加入Bricks主题
微信交流群(广告勿扰)
建站咨询 /购买主题插件
请添加微信

版权所有©TryBricks

教程目录

本站购买Bricks官方终身授权99元/1站点,附赠一个BricksExtras终身授权

外贸建站服务 · WordPress技术咨询请扫描二维码联系