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”下拉菜单。以通过编辑“样式”选项卡中的颜色选项来调整悬停颜色。还可以使用矩阵、翻译、旋转和倾斜等效果来进一步自定义菜单的悬停动画。