悬停在嵌套项上可以影响其父级吗？ [英] Hover on nested item can affect its parent?

问题描述

我有一个使用纯CSS的菜单，鼠标悬停在父 li 项目显示嵌套列表。简化示例：

 < ul id =menu-top> 
< li class =menu-item> 
< a href =http：// localhost / wp5 / forums />论坛< / a> 
< ul class =sub-menu> 
< li>< a href =http：// localhost / wp5 / register />注册< / a>< / li> 
< li>< a href =http：// localhost / wp5 / activate />激活< / a>< / li& 
< li>< a href =http：// localhost / wp5 / members /> Members< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

css：

  .navigation ul.menu li：hover {background：#ccc} //悬停父项目更改它bg颜色
 
 .navigation ul.sub-menu li {
 display：none; 
} 
 
 .navigation ul li：hover> ul.sub-menu li {display：block; } 
  

它工作正常，但我想添加一个持久效果，

我试过这个，但不能工作：

  .navigation ul.sub-menu li：hover> .navigation ul.menu li {background：#ccc} 
  

我不知道这是否可能没有javscript或else，也不能在CSS中找到关于使用>的任何东西。

谢谢任何帮助

在被悬停在其上的元素的所有祖先上触发，因此将会被触发。 navigation ul.menu li：hover {background：#ccc; }

或者，有一天我们应该能够使用 ：has（） 。

I have a menu using pure CSS, hover a parent li item display the the nested list. A simplified example:

  <ul id="menu-top" >
    <li class="menu-item">
      <a href="http://localhost/wp5/forums/">Forums</a>
      <ul class="sub-menu">
        <li><a href="http://localhost/wp5/register/">Register</a></li>
        <li><a href="http://localhost/wp5/activate/">Activate</a></li>
        <li><a href="http://localhost/wp5/members/">Members</a></li>
      </ul>
    </li>
  </ul>

The css:

.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color

.navigation ul.sub-menu li {
 display:none;
}

.navigation ul li:hover > ul.sub-menu li { display: block; }

It works ok, but I'm trying to add an "persistent" effect, I want keep the parent style set when hovering also the sub-item.

I tried this but can't get working:

.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}

I don't know if this is possible without javscript or else, also can't find anything about using ">" in CSS.

THanks for any help

解决方案

:hover is triggered on all ancestors of the element that is being hovered over, so .navigation ul.menu li:hover { background: #ccc; } should work just fine.

Alternatively, someday we should be able to use :has().

这篇关于悬停在嵌套项上可以影响其父级吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！