css - 让 Dashicons 在 Wordpress 导航菜单中呈现悬停效果

Question

如果您查看 http://www.footballpractice.org 的顶部导航菜单，您会看到我尝试使用通过 Wordpress 菜单分配的 CSS 类在其中添加破折号。 dashicon 在常规状态下看起来不错，但不具有悬停效果。将悬停类应用于 :before 元素的最佳方法是什么？

Answer 1

一种方法是在 :before 之前应用 :hover。

div:hover:before {
...
}

对于您的网站来说:

.dashicons-megaphone:hover:before, 
.dashicons-search:hover:before, 
.dashicons-groups:hover:before, 
.dashicons-format-video:hover:before {
...
}

虽然这是你的要求，但这不是你想要的。您希望图标包含在悬停效果中，这就是为什么最好在 a 标签内的 span 上设置 :before。

更新的 html

<li>
  <a href="#">
    <span>Drills</span>
  </a>
</li>

更新的 CSS

.nav-header .genesis-nav-menu li a span:before {
  content: "\f488";
  font: normal 18px/1 'dashicons';
  margin-right: 5px;
}

这就够了，如果您需要更多帮助，请告诉我。