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

【问题标题】：When hovering a CSS list item, change the parent items CSS悬停 CSS 列表项时，更改父项 CSS
【发布时间】：2019-05-07 20:59:33
【问题描述】：

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

一旦子菜单显示并悬停，我需要做的是更改实际More 的 CSS 的 CSS。

因此，如果您将鼠标悬停在 More 上，子菜单就会变得可见，然后您将鼠标悬停在该子菜单上。此时，我需要更改此子菜单的父级 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>

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

老问题，接受的答案很聪明。但这很容易实现，只需对 CSS 进行一次更改即可：

#nav-wrapper ul li a:hover

到：

#nav-wrapper ul li:hover>a

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

请参阅this jsFiddle 以了解正在实施的修复

【讨论】：

这会改变子元素，而不是父元素
@JoeLannen - 是的，这正是 OP 所要求的。没有父选择器之类的东西，但是通过像这样将 CSS 悬停样式移动到父 li，您就不需要了。
我知道没有父选择器，要求更改父 CSS 的问题。我知道你现在用你的解决方案去哪里了。欢呼

【解决方案3】：

您不能在 CSS 中选择父元素。你需要 javascript/jQuery 来完成你想要的。

CSS3 selectors...

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

上述@CherryFlavourPez 的解决方案有效。但是，它起作用的原因并没有得到清楚的解释。请注意，li 元素（带有“更多”文本的元素）是子菜单的父（带有五个 的 ul >li 个元素）。 a 元素是子菜单的（相邻的）sibling。因此，当您将鼠标悬停在子菜单上时，您实际上仍将鼠标悬停在父 li 元素上。

【讨论】：

虽然只使用 CSS 来改变父子的 CSS 仍然是不可能的。

【解决方案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>

【讨论】：