在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 * / 
} 
  
  
 
 
但是将鼠标悬停在第三个 li 
 / code> 不能影响相同的 li.active 元素。
 
 
 
但是，以下操作将起作用：
  ul：hover li.active {
 background-color：transparent; 
} 
  
  JS Fiddle demo 。
 
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 current li.active element with the following CSS:
li:hover ~ li.active {
    background-color: #f00; /* or whatever */
}
JS Fiddle demo.

But hovering over the third li cannot affect the same li.active element.

However, the following would work:
ul:hover li.active {
    background-color: transparent;
}
JS Fiddle demo.

                        
这篇关于在css中的另一个类上悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！