html - :hover and css-class overlapping

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 标签)时，悬停再次应用，这是不应该发生的，它应该保持不变。

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

如有任何帮助，我们将不胜感激!

Answer 1

因为 <li>默认为 border-left并且您正在设置 anchor 元素的样式。

#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;
}