Html 悬停 CSS 列表项时，更改父项 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8622611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When hovering a CSS list item, change the parent items CSS
提问by CodeDevelopr
I have a simple UL list, when you hover over the Morelist item in the HTML below, it unhides it's child menu and shows it.
我有一个简单的 UL 列表，当您将鼠标悬停在More下面 HTML 中的列表项上时，它会取消隐藏它的子菜单并显示它。
What I need to do is change the CSS of the actual More's CSS once the child menu is show and hovered.
我需要做的是在More显示并悬停子菜单后更改实际CSS 的 CSS。
So if you hover over Morea child menu becomes visible, you then hover over that child menu. At this point I need to change the CSS of the Parent of this child menu which would be the menu that has Moreas it's text.
因此，如果您将鼠标悬停在More子菜单上变得可见，那么您将鼠标悬停在该子菜单上。在这一点上，我需要更改此子菜单的父级的 CSS，这将是具有More文本的菜单。
If you know how to do this without Javascript, I would love to know.. Maybe it is not even possible without JS?
如果你知道如何在没有 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>
The CSS
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>
回答by Wex
Well, despite what these other answers say, here's kind of a sneaky way of going about it using the adjacent selector.
好吧，不管这些其他答案怎么说，这里有一种使用相邻选择器的偷偷摸摸的方法。
HTML:
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:
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; }
Preview: http://jsfiddle.net/Wexcode/YZtgL/
回答by CherryFlavourPez
Old question, and the accepted answer is clever. But this is pretty trivial to achieve, with just a single change in your CSS from:
老问题，接受的答案很聪明。但这很容易实现，只需对您的 CSS 进行一次更改：
#nav-wrapper ul li a:hover
to:
到：
#nav-wrapper ul li:hover>a
This won't work in IE6 (that browser only understands hover styles on anchors). But then nor does the adjacent sibling combinator selector (+).
这在 IE6 中不起作用（该浏览器仅理解锚点上的悬停样式）。但是相邻的兄弟组合器选择器（+）也没有。
See this jsFiddlefor the fix in action
请参阅此 jsFiddle以获取修复程序
回答by Scott
You can not select parent elements in CSS. You'll need javascript/jQuery to accomplish what you want.
您不能在 CSS 中选择父元素。你需要 javascript/jQuery 来完成你想要的。
回答by Virendra
It is not possible to select the parent of an element using CSS. You will have to use JavaScript or JavaScript libraries such as jQuery to implement this.
无法使用 CSS 选择元素的父元素。您将不得不使用 JavaScript 或 JavaScript 库（例如 jQuery）来实现这一点。
This might help you. Complex CSS selector for parent of active child
这可能对你有帮助。 活动子项的父项的复杂 CSS 选择器
回答by leoncc
The solution of @CherryFlavourPez above works. The reason why it works is not explained clearly though. Note that the lielement (the one with the "More" text) is a parentof the submenu (the ulwith the five lielements in it). The aelement is a (adjacent) siblingof the submenu. So when you are hovering over the submenu you are actually still hovering over the parent lielement as well.
上面@CherryFlavourPez 的解决方案有效。虽然它起作用的原因没有清楚地解释。请注意，li元素（带有“更多”文本的元素）是子菜单（其中包含五个li元素的ul）的父级。的一个元素是一个（相邻的）同级子菜单的。因此，当您将鼠标悬停在子菜单上时，您实际上还悬停在父li元素上。
回答by An?l ?ahin
You look here CSS selectorsand I send an example for you have a nice day
你看这里CSS 选择器，我发送一个例子，让你有一个美好的一天
.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>