将鼠标悬停在按钮上时尝试使导航文本更改颜色，而不仅仅是文本答案

【问题标题】：Trying to make nav text change color when hovering over the button and not only the text将鼠标悬停在按钮上时尝试使导航文本更改颜色，而不仅仅是文本
【发布时间】：2014-10-29 22:31:32
【问题描述】：

我制作了一个导航，每边都有填充和背景颜色。我在文本上有一个默认颜色，并在悬停时使背景变成另一种颜色。问题是我希望文本在背景悬停时改变颜色而不是文本只是因为我需要使用与背景颜色的默认文本相同的颜色[悬停时]如果我现在悬停那么它基本上会是不可见的文本，因为背景和文本将是相同的颜色。即使将鼠标悬停在文本之外而不是仅将文本悬停在文本之外，我也希望文本颜色发生变化。

jsfiddle - http://jsfiddle.net/ucsk99cL/

<aside class="sidebar">
    <nav>
        <ul>
            <li style=""><a href="">home</a></li>
            <li><a href="">about us</a></li>
            <li><a href="">orders</a></li>
            <li><a href="">gallery</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </nav>
</aside>




.sidebar{
float:left;
margin:20px;
margin-right:150px;
}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
}


nav ul li{
padding-top:26px;
padding-bottom:26px;
padding-left:57px;
padding-right:57px;
margin-bottom:3px;
background-color: #CBAFA2;
}

nav ul li:hover{
background-color: #3D2316;
}

【问题讨论】：

标签： html css nav sidebar

【解决方案1】：

只需将鼠标悬停在父元素li 上时更改颜色即可：

Updated Example

nav ul li:hover a {
    color: #fff;
}

如果您希望能够单击li 中的任意位置，则必须将填充添加到锚元素而不是li 元素。只需将 display 更改为 inline-block 以使其尊重填充。我还做了一些其他更改，请参阅example。

nav ul li a {
    padding:26px 58px;
    display:inline-block;
}

【讨论】：

【解决方案2】：

试试这个

<aside class="sidebar">
<nav>
    <ul>

        <li id="test"><a href="">home</a></li>
        <li id="test"><a href="">about us</a></li>
        <li id="test"><a href="">orders</a></li>
        <li id="test"><a href="">gallery</a></li>
        <li id="test"><a href="">contact</a></li>
    </ul>
</nav>

添加以下css代码；

#test:hover a {color:red;}

【讨论】：