html - a:hover 和 css 类重叠

Question

我正在尝试在 wordpress 中制作一个侧面菜单，效果很好，但由于某种原因，css 很痛苦，我似乎无法理解它。

导航如下所示：

<nav>
  <ul id="sidebar-menu">
    <li class="page_item page-item-8 current_page_item"><a href="http://www.consana.nl/diensten/">Diensten</a></li>
    <li class="page_item page-item-32"><a href="http://www.consana.nl/diensten/dienst-1/">Dienst 1</a></li>
    <li class="page_item page-item-33"><a href="http://www.consana.nl/diensten/dienst-2/">Dienst 2</a></li>
    <li class="page_item page-item-36"><a href="http://www.consana.nl/diensten/dienst-3/">Dienst 3</a></li>
 </ul>
</nav>

用于此的 css 如下所示：

#left-side nav a:hover, #left-side nav .current_page_item{
   border-left:10px #b8d276 solid;
   border-right:none;
   padding-left:10px;
   font-style: italic;
}

现在，当其中一个项目被“选中”（具有 .current_page_item-tag）时，再次应用悬停，不应该发生什么，它应该保持不变。

在以下页面上，您可以看到它的实际效果：http: //www.consana.nl/en/diensten/

任何帮助，将不胜感激！

Answer 1

因为<li>具有默认值border-left，并且您正在为锚元素设置样式。

#left-side nav li:hover, #left-side nav .current_page_item{
   border-left:10px #b8d276 solid;
   border-right:none;
   padding-left:10px;
   font-style: italic;
}