悬停CSS列表项时，请更改父项CSS
悬停CSS列表项时，请更改父项CSS
提问于 2011-12-24 12:08:52
我有一个简单的UL列表，当你将鼠标悬停在下面超文本标记语言中的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>回答 5
Stack Overflow用户
回答已采纳
发布于 2011-12-24 12:26:37
好吧，不管其他答案怎么说，这里有一种使用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; }Stack Overflow用户
发布于 2013-08-07 20:11:19
老问题，公认的答案是聪明的。但要实现这一点非常简单，只需对CSS进行如下更改：
#nav-wrapper ul li a:hover至：
#nav-wrapper ul li:hover>a这在IE6中是行不通的(浏览器只能识别锚点上的悬停样式)。但随后相邻的同级组合符选择器(+)也不会。
有关实际修复的信息，请参阅this jsFiddle
Stack Overflow用户
发布于 2011-12-24 12:16:21
不能在CSS中选择父元素。你需要javascript/jQuery来完成你想要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8622611
复制相关文章
相似问题