www.wpcitation.com/

Tag: Elementor 自定义样式

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

打开页面或模板：
- 登录到 WordPress 仪表板。
- 导航到需要使用 Elementor 编辑的页面。
- 编辑“页眉”、“页脚”或包含菜单的模板。
添加或编辑导航Elementor：
- 导航到现有的菜单元素，或在Elementor选项卡中添加“WordPress 菜单”元素。
- 单击元素上的“高级”选项卡。
- 导航到“自定义 CSS”下拉菜单。
复制 CSS 样式：
- 从我们主页上的库中复制所需的菜单悬停样式。
添加 CSS 代码：
- 将 CSS 样式粘贴到“自定义 CSS”下拉列表中的文本区域。
编辑颜色：
- 某些菜单样式使用 Elementor 的默认“指针”颜色。
- 导航到菜单的“样式”选项卡。
- 单击“悬停”，然后在颜色选择器下编辑“颜色”。
- 可选：要覆盖 Elementor 的默认颜色样式，请在结束“;”之前使用!important 。
保存并发布
- 单击“更新”或“发布”以应用更改。
其它可以使用其他 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 编辑器，可以通过添加自定义 CSS 来增强菜单的悬停效果。在Elementor选项卡中添加或编辑导航Elementor，进入“高级”选项卡，并导航到“自定义 CSS”下拉菜单。以通过编辑“样式”选项卡中的颜色选项来调整悬停颜色。还可以使用矩阵、翻译、旋转和倾斜等效果来进一步自定义菜单的悬停动画。
May 24, 2024

Tag: Elementor 自定义样式

如何添加 Elementor 菜单悬停效果

打开页面或模板：

添加或编辑导航Elementor：

复制 CSS 样式：

添加 CSS 代码：

编辑颜色：

保存并发布

总结：