Question

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

<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;
}

Answer 1

只需更改悬停时的color属性即可。

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

Answer 2

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

更新小提琴：

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

是this你想要实现的目标吗？

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

.special:hover{
  color:#FFF;
 }

同时更改文本的颜色

2 个答案: