让Dashicons在Wordpress Nav菜单中采取悬停效果

Question

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

Answer 1

一种方法是通过应用：hover before：before。

div:hover:before {
...
}

对于您的网站：

.dashicons-megaphone:hover:before, 
.dashicons-search:hover:before, 
.dashicons-groups:hover:before, 
.dashicons-format-video:hover: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;
}

这样做，请告诉我你是否需要更多帮助。