同时更改文本的颜色答案

【问题标题】：Change the colour of text simultaneously同时更改文本的颜色
【发布时间】：2018-06-21 13:48:52
【问题描述】：

所以我花了很长时间试图弄清楚当我将鼠标悬停在导航上时如何更改背景颜色，然后我意识到我还需要更改现有文本的颜色以使其在导航悬停在上方。我不知道如何做到这一点。我的代码如下：

<DOCTYPE! html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Jasmine Everett</title>
            <meta name="description" content="graphic designer just trying to get through life">
            <link rel="stylesheet" href="main.css">
            <link href="css/style.css" media="all" rel="stylesheet" »
          type="text/css" />
        </head>
        <body>
            <h2 align="center" class="change"> JASMINE EVERETT</h2>
            <h3 align="center" class="change"><em>Graphic Designer</em></h3>
                <ul class="nav">
                    <button><a  class="special" href="work.html">WORK</a></button> |
                    <button><a class="special" href="about.html">ABOUT</a></button> |
                    <button><a class="special" href="contact.html">CONTACT</a></button>
                </ul>
        </html>

CSS

.special{
    background: transparent;
    display: inline-block;
}

.special:before{
    background-color: transparent;
    transition; background-color 0.2s ease,opacity;
    content: '';
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: -1;
    opacity: 0;
}
.special:hover:before{
    position:fixed;
    transition: background-color 0.2s ease, opacity;
    opacity: 1;
}
.special:hover:before{
    background-color: black;
}


button{border: none;
    background: white;
    color: black;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease; 
}

button:hover {
    background: rgba(0,0,0,0);
    color: white;
    box-shadow: inset 0 0 0 3px white;
}

【问题讨论】：

可能重复：stackoverflow.com/questions/3741157/…
Text color change on hover over button的可能重复

标签： jquery html css

【解决方案1】：

只需像这样在悬停时更改color 属性就可以了。

.special:hover:before{
    background-color: black;
    color: #000000;
}

【讨论】：

【解决方案2】：

更新： 在悬停时使用 jQuery 将类分配给要设置样式的元素。

更新的小提琴：

https://jsfiddle.net/brb48wb1/2/

this 是你想要达到的目标吗？

如果是，只需在您的 css 中添加以下内容

.special:hover{
  color:#FFF;
 }

【讨论】：

这是我想要做的，但也有两个标题