在css中的另一个类上悬停效果 [英] hover effect on another class in css
问题描述
我有菜单,其中活动项目在加载时具有活动类,这改变其背景。
其他项目的悬停改变了悬浮项目的背景。 / p>
< ul>
< li>< / li>
< li class =active>< / li>
< li>< / li>
< / ul>
< style>
li:hover,li.active {background:black}
< / style>
有没有办法删除其他项目上的活动类背景悬停在纯CSS。例如:
li.hover .active {background:none}
解决方案如果活动在li下, / div>这在CSS中是不可靠的,因为CSS只能影响DOM中以前未出现的元素,所以将鼠标悬停在第一个
li 可以使用以下CSS影响当前的
li.active
元素:li:hover〜li.active {
background-color:#f00; / * or whatever * /
}
但是将鼠标悬停在第三个
/ code> 不能影响相同的li
li.active
元素。
但是,以下操作将起作用:
ul:hover li.active {
background-color:transparent;
}
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul> <li></li> <li class="active"></li> <li></li> </ul> <style> li:hover, li.active {background:black} </style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
解决方案This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first
li
can affect the currentli.active
element with the following CSS:li:hover ~ li.active { background-color: #f00; /* or whatever */ }
But hovering over the third
li
cannot affect the sameli.active
element.However, the following would work:
ul:hover li.active { background-color: transparent; }
这篇关于在css中的另一个类上悬停效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文