将鼠标悬停在li上时，如何获得更改颜色的链接？
[英]How would I get my links to change color when hovering over li?
问题描述
When I hover over my links the actual links only change color if I hover over them directly. 
当我将鼠标悬停在链接上时，如果直接将鼠标悬停在链接上，则实际的链接只会更改颜色。 Anyway I can make the text change color when I hover over the actual li instead? 无论如何，当我将鼠标悬停在实际的li上时，可以使文本更改颜色吗？ Thanks. 谢谢。
I'm still learning so if you see faults in my code please let me know. 我仍在学习，因此，如果您发现我的代码中有错误，请告诉我。 Cheers! 干杯!
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>
4 个解决方案
解决方案1
4 2016-08-10 14:20:38
Use the CSS selector nav li:hover a instead. 使用CSS选择器nav li:hover a代替。 This is essentially saying that when the li in the nav is hovered over change the a element inside the li. 本质上是说，当导航栏中的li悬停在上方时，更改li内部的一个元素。
The property now looks like: 该属性现在看起来像：
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>
解决方案2
1 2016-08-10 14:21:47
nav li:hover a {
color: #b0b0b0;
}
解决方案3
0 2016-08-10 14:28:29
The downside of simply changing the color of your links when hovering their parents is that it will give the impression that the entite li is clickable, which it won't be. 当将鼠标悬停在其父母上时，简单地更改链接的color的缺点是，将给人一种印象，即实体li是可单击的，而不会被单击。 To get around this, set the display property of your links to block , forcing the links to occupy the full space available in their parents. 要解决此问题，请将链接的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; }
<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>
解决方案4
0 2016-08-10 14:31:48
you can still use tag names after hover command like this: 您仍然可以在hover命令之后使用标签名称，如下所示：
nav li:hover a{
color: #ffffff;
transition: color 0.8s ease;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.