如何使用 CSS 将字体颜色从 li:hover 应用到内部链接文本

How to appy font color from li:hover to inner a link text using CSS

提问人:happy 提问时间:12/31/2012 最后编辑:happy 更新时间:12/31/2012 访问量:1803

问:

<!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>

更新:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 状态:已完成,代码已更新

CSS HTML 不显眼的 javascript

评论


答:

1赞 David Thomas 12/31/2012 #1

这取决于元素内部的元素,但假设您知道它们是什么(在本例中):lia

#nav li:hover a {
     color: inherit;
}

尽管根据 、 和 状态的定义方式,其他选择器的特殊性可能会覆盖此声明。a:linka:visiteda:hovera:active

为了不那么精确,您可以使用通配符选择器:*

#nav li:hover * {
     color: inherit;
}

但是,同样,这可能会被其他地方定义的其他更具体的选择器所否决(尤其是在使用 an 时)。id