提问人:happy 提问时间:12/31/2012 最后编辑:happy 更新时间:12/31/2012 访问量:1803
如何使用 CSS 将字体颜色从 li:hover 应用到内部链接文本
How to appy font color from li:hover to inner a link text using CSS
问:
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
aside#_left{
width:239px;
margin-left:0px;
margin-right:1px;
display:inline;
position:fixed;
}
#content{
padding-top:70px;
padding-left:225px;
}
.menu01{
background-color:#827F80;
width:80%;
}
ul#nav{
color:#6E7377;
list-style-type:none;
line-height:200%;
padding-top:5px;
padding-bottom:10px;
margin:0px;
padding:0px;
text-align:center;
}
ul#nav li:hover{
cursor:pointer;
border-top:1px solid #7a9bb6;
border-bottom:1px solid #7a9bb6;
background:#5482a0;
}
#nav a:link{
color:#6E7377;
text-decoration:none;
font-weight:bolder;
}
#nav a:hover{
color:#78C6FF;
}
#nav li * {
color: inherit;
}
#nav li:hover * {
color: inherit;
color:#78C6FF;
}
</style>
</head>
<body>
<aside id="_left">
<img src="images/logo.png" />
<nav class="menu01">
<ul id="nav">
<li><a href="#">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#">Etiam interdum egestas nulla, ac dignissim urna suscipit non.</a></li>
</ul>
</nav>
</aside>
<div id="content">
<p>
Cras at dapibus mi. Vestibulum quis odio odio, a scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Ut ornare convallis elementum. Vivamus tincidunt malesuada lacus nec lacinia. Vestibulum lorem tortor, gravida sed convallis nec, dapibus ut leo. Donec id posuere leo.
Cras quis ante et dolor dictum euismod.
</p>
</div>
</body>
</html>
我想要的只是从 li:hover 填充链接字体颜色。我怀疑我只是太疯了......
基本上,当鼠标越过侧面导航面板时,我希望其中的文本发生变化,无论其中有什么元素,例如.<a>
更新:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 状态:已完成,代码已更新
答:
1赞
David Thomas
12/31/2012
#1
这取决于元素内部的元素,但假设您知道它们是什么(在本例中):li
a
#nav li:hover a {
color: inherit;
}
尽管根据 、 和 状态的定义方式,其他选择器的特殊性可能会覆盖此声明。a:link
a:visited
a:hover
a:active
为了不那么精确,您可以使用通配符选择器:*
#nav li:hover * {
color: inherit;
}
但是,同样,这可能会被其他地方定义的其他更具体的选择器所否决(尤其是在使用 an 时)。id
评论