Question

我有一个简单的UL列表，当您将鼠标悬停在下面的HTML中的More列表项时，它会取消隐藏它的子菜单并显示它。

我需要做的是在显示和悬停子菜单后更改实际More的CSS的CSS。

因此，如果您将鼠标悬停在More上，则可以看到子菜单，然后将鼠标悬停在该子菜单上。此时我需要更改此子菜单的Parent的CSS，该菜单将是包含More文本的菜单。

如果你知道如何在没有Javascript的情况下做到这一点，我很想知道..如果没有JS，它甚至不可能吗？

 <div id="nav-wrapper">
        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>
                <ul>
                    <li><a href="">Sub Link 1</a></li>
                    <li><a href="">Sub Link 2</a></li>
                    <li><a href="">Sub Link 3</a></li>
                    <li><a href="">Sub Link 4</a></li>
                    <li><a href="">Sub Link 5</a></li>
                </ul>
            </li>

        </ul>
    </div>

CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
    position:relative;
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
    display: block;
    margin:-10px 0 0 0;
    padding:0px 20px 20px 20px;
    border-color:#fff;
    border:1px;
    border-style:solid;
    background:#FFF;
    position:absolute;

    top:45px;
    right: 320px;
    width: 420px;
}

</style>

Answer 1

嗯，尽管这些其他答案说的是，这里有一种偷偷摸摸的方式来使用adjacent selector。

HTML：

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS：

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

预览：http://jsfiddle.net/Wexcode/YZtgL/

Answer 2

老问题，接受的答案很聪明。但是，只需对CSS进行一次更改即可实现这一点非常简单：

#nav-wrapper ul li a:hover

到：

#nav-wrapper ul li:hover>a

这在IE6中不起作用（该浏览器只能理解锚点上的悬停样式）。但是，相邻的兄弟组合选择器（+）也没有。

请参阅this jsFiddle了解有效的修补程序

Answer 3

您无法在CSS中选择父元素。你需要javascript / jQuery来完成你想要的东西。

CSS3 selectors...

Answer 4

无法使用CSS选择元素的父级。您将不得不使用JavaScript或JavaScript库（如jQuery）来实现此目的。

这可能会对你有所帮助。 Complex CSS selector for parent of active child

Answer 5

上面@CherryFlavourPez的解决方案有效。它的工作原因并没有明确解释。请注意， li 元素（带有＆＃34;更多＆＃34;文本的元素）是子菜单的父（ ul 其中包含五个 li 元素）。 a 元素是子菜单的（相邻）兄弟。因此，当您将鼠标悬停在子菜单上时，您实际上仍然将鼠标悬停在父 li 元素上。

Answer 6

你在这里CSS selectors，我给你发了一个例子，祝你有美好的一天

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}

<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>

悬停CSS列表项时，更改父项CSS

6 个答案: