如何添加 Elementor 菜单悬停效果

如何添加 Elementor 菜单悬停效果

如果你使用 Elementor编辑器,可以按照以下步骤添加自定义 CSS 菜单悬停效果:

打开页面或模板:

  • 登录到 WordPress 仪表板。
  • 导航到需要使用 Elementor 编辑的页面。
如何添加 Elementor 菜单悬停效果
  • 编辑“页眉”、“页脚”或包含菜单的模板。
如何添加 Elementor 菜单悬停效果

添加或编辑导航Elementor:

  • 导航到现有的菜单元素,或在Elementor选项卡中添加“WordPress 菜单”元素。
如何添加 Elementor 菜单悬停效果
  • 单击元素上的“高级”选项卡。
如何添加 Elementor 菜单悬停效果
  • 导航到“自定义 CSS”下拉菜单。
如何添加 Elementor 菜单悬停效果

复制 CSS 样式:

  • 从我们主页上的库中复制所需的菜单悬停样式。
如何添加 Elementor 菜单悬停效果

添加 CSS 代码:

  • 将 CSS 样式粘贴到“自定义 CSS”下拉列表中的文本区域。
如何添加 Elementor 菜单悬停效果

编辑颜色:

  • 某些菜单样式使用 Elementor 的默认“指针”颜色。
  • 导航到菜单的“样式”选项卡。
  • 单击“悬停”,然后在颜色选择器下编辑“颜色”。
如何添加 Elementor 菜单悬停效果
  • 可选:要覆盖 Elementor 的默认颜色样式,请在结束“;”之前使用!important 。
如何添加 Elementor 菜单悬停效果

保存并发布

  • 单击“更新”或“发布”以应用更改。

其它可以使用其他 4 种类型的转换

  • 矩阵(matrix):通过变换矩阵来应用复杂的二维转换。
  • 翻译(translate):移动元素在二维或三维空间中的位置。
  • 旋转(rotate):围绕指定的点旋转元素。
  • 倾斜(skew):扭曲元素,使其在水平或垂直方向上倾斜。

示例代码:

/* 悬停效果示例 */
selector:hover {
  color: #ffffff !important;
  background-color: #000000 !important;
  transform: translateY(-10px); /* 添加翻译效果 */
}

/* 旋转效果示例 */
selector:hover {
  transform: rotate(10deg); /* 添加旋转效果 */
}

/* 倾斜效果示例 */
selector:hover {
  transform: skewX(10deg); /* 添加水平倾斜效果 */
}

/* 矩阵效果示例 */
selector:hover {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0); /* 添加矩阵效果 */
}

总结:

如何添加 Elementor 菜单悬停效果

如果你使用 Elementor 编辑器,可以通过添加自定义 CSS 来增强菜单的悬停效果。在Elementor选项卡中添加或编辑导航Elementor,进入“高级”选项卡,并导航到“自定义 CSS”下拉菜单。以通过编辑“样式”选项卡中的颜色选项来调整悬停颜色。还可以使用矩阵、翻译、旋转和倾斜等效果来进一步自定义菜单的悬停动画。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10268/

(1)
上一篇 2024年 5月 24日 下午3:19
下一篇 2024年 5月 25日 上午10:56

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
为方便全球用户注册登录,我们已取消电话登录功能。如遇登录问题,请联系客服协助绑定邮箱。