当我将鼠标悬停在链接上时,如果我直接将鼠标悬停在链接上,则实际链接只会改变颜色。无论如何,当我将鼠标悬停在实际的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>
答案 0 :(得分:4)
使用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;
}
&#13;
<!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>
&#13;
答案 1 :(得分:1)
nav li:hover a {
color: #b0b0b0;
}
答案 2 :(得分:0)
在悬停父母时,简单地更改链接的color
的缺点是,它会给人一种诱惑li
可点击的印象,这是不可能的。要解决此问题,请将链接的display
属性设置为block
,强制链接占用其父级的可用空间。
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 {
display: block;
text-decoration: none;
color: #b0b0b0;
font-family: 'verdana', sans-serif;
padding: 0 20px;
font-size: 0.85em;
}
nav a:hover {
background-color: #5db0c6;
color: #ffffff;
transition: color 0.8s ease;
}
&#13;
<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>
&#13;
答案 3 :(得分:0)
您仍然可以在hover
命令之后使用标记名称:
nav li:hover a{
color: #ffffff;
transition: color 0.8s ease;
}