gpt4 book ai didi

html - :hover and css-class overlapping

转载 作者:太空宇宙 更新时间:2023-11-04 04:42:33 24 4
gpt4 key购买 nike

我正在尝试在 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/

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

最佳答案

因为 <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;
}

关于html - :hover and css-class overlapping,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15174323/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com