当我将鼠标悬停在链接上时，如果直接将鼠标悬停在链接上，则实际链接只会更改颜色。无论如何，当我将鼠标悬停在实际的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内部的一个元素。
该属性现在看起来像：
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/