【发布时间】：2017-08-26 17:45:24
【问题描述】：
我有一个 wordpress 网站，http://watershedgeo.staging.wpengine.com/#，我正在使用一个主题，它内置在导航菜单中。
我已对其进行了修改，以便在具有下拉项的菜单项之后使用字体真棒图标。我使用的是直角，>，但我想使用插件或 css 对其进行动画处理，以便当下拉菜单出现时，图标会旋转到“V”。
我不想在其中构建任何 JS，我知道它可以用 CSS 来完成我只是不确定在 WP 环境中也能很好地工作的最佳方法。
当前的 CSS：
.fusion-megamenu-icon {
display: inline;
margin-left: 12px;
float: right;
}
.fusion-megamenu-icon:hover {
transform: rotate(90deg);
}
【问题讨论】：
-
您尝试过对 .current-menu-item 图标进行转换吗？如：
.current-menu-item .fa.glyphicon.fa-angle-right { transform: rotate(90deg); }也试试悬停 -
抱歉，我更新了我当前的 CSS，当我只将鼠标悬停在图标上时，它确实有效。如果我一般将鼠标悬停在菜单项上，有没有办法让它工作？
-
是的，查看 html 结构并使用正确的类更新选择器。我的示例使用应用于当前页面的列表项的 CSS。 (li:hover icon) 选择父项
-
我不太清楚你的意思？我试过了，但它仍然在图标悬停，而不是菜单项悬停 .menu-item:hover .fusion-megamenu-icon:hover{ transform: rotate(90deg); }
-
:hover 仅用于父级。你应该学习一些关于造型的基础知识，这会很有帮助你可以从这里开始stackoverflow.com/tags/css/info ;)