当我将鼠标悬停在我的链接上时，只有当我直接将鼠标悬停在它们上时，实际链接才会改变颜色。无论如何，当我将鼠标悬停在实际的 li 上时，我可以让文本改变颜色吗？谢谢。
我还在学习，所以如果您在我的代码中发现错误，请告诉我。干杯!
body {
background: url('bg.jpg');
margin: 0px;
padding: 0px;
}
nav {
background-color: #ffffff;
width: 80%;
height: 60px;
margin: 200px auto auto auto;
}
nav ul {
list-style-type: none;
margin: auto;
}
nav li {
display: inline-block;
line-height: 60px;
float: right;
}
nav a {
text-decoration: none;
color: #b0b0b0;
font-family: 'verdana', sans-serif;
padding: 0 20px;
font-size: 0.85em;
}
nav a:hover {
color: #ffffff;
transition: color 0.8s ease;
}
nav li:hover {
background-color: #5db0c6;
}
#head-image {
background: url('land.png');
width: 80%;
height: 400px;
margin: auto;
}
#second-header {
width: 80%;
height: 60px;
margin: auto;
background-color: #ffffff;
}
#third-header {
width: 80%;
height: 700px;
margin: auto;
background-color: #ededed;
}<!DOCTYPE html>
<html>
<head>
<title>site</title>
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" />
<link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<!--[if lt IE 8]>
<![endif]-->
</head>
<body>
<nav>
<ul>
<li><a href="">Gamerscoin</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact</a></li>
<li><a href="">RS3</a></li>
<li><a href="">RS7</a></li>
<li><a href="">CSGO</a></li>
<li><a href="">POE</a></li>
<li><a href="">LoL</a></li>
<li><a href="">Path of Exile</a></li>
<li><a href="">Habbo</a></li>
</ul>
</nav>
<div id="head-image"></div>
<div id="second-header"></div>
<div id="third-header"></div>
</body>
</html>最佳答案
改用 CSS 选择器 nav li:hover a。这实际上是说，当导航中的 li 悬停在上方时，更改 li 中的 a 元素。
该属性现在看起来像:
nav li:hover a{
color: #ffffff;
transition: color 0.8s ease;
}
body {
background: url('bg.jpg');
margin: 0px;
padding: 0px;
}
nav {
background-color: #ffffff;
width: 80%;
height: 60px;
margin: 200px auto auto auto;
}
nav ul {
list-style-type: none;
margin: auto;
}
nav li {
display: inline-block;
line-height: 60px;
float: right;
}
nav a {
text-decoration: none;
color: #b0b0b0;
font-family: 'verdana', sans-serif;
padding: 0 20px;
font-size: 0.85em;
}
nav li:hover a{
color: #ffffff;
transition: color 0.8s ease;
}
nav li:hover {
background-color: #5db0c6;
}
#head-image {
background: url('land.png');
width: 80%;
height: 400px;
margin: auto;
}
#second-header {
width: 80%;
height: 60px;
margin: auto;
background-color: #ffffff;
}
#third-header {
width: 80%;
height: 700px;
margin: auto;
background-color: #ededed;
}<!DOCTYPE html>
<html>
<head>
<title>site</title>
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" />
<link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<!--[if lt IE 8]>
<![endif]-->
</head>
<body>
<nav>
<ul>
<li><a href="">Gamerscoin</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact</a></li>
<li><a href="">RS3</a></li>
<li><a href="">RS7</a></li>
<li><a href="">CSGO</a></li>
<li><a href="">POE</a></li>
<li><a href="">LoL</a></li>
<li><a href="">Path of Exile</a></li>
<li><a href="">Habbo</a></li>
</ul>
</nav>
<div id="head-image"></div>
<div id="second-header"></div>
<div id="third-header"></div>
</body>
</html>关于html - 将鼠标悬停在 li 上时，如何让我的链接改变颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38875990/