所以我花了很长时间试图弄清楚当我将鼠标悬停在导航上时如何更改背景颜色，然后我意识到我还需要更改现有文本的颜色以使其在导航悬停在上方。我不知道如何做到这一点。我的代码如下:
<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;
}
最佳答案
只需像这样在悬停时更改 color 属性即可。
.special:hover:before{
background-color: black;
color: #000000;
}
关于jquery - 同时更改文本的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48220495/