Question

我有这段代码:(全屏查看）

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
}
a {
	text-decoration: none;
    color: white;
    font-size: 18px;
}
li {
	padding: 10px 18px;
    float: left;
    transition: color 0.2s, background 0.2s;
}
li:hover {
    color: black;
    background: white;
}

</style>
</head>
<body>
<div class='nav'>
<ul>
	<li><a href='javascript:void(0)'>Home</a></li>
	<li><a href='javascript:void(0)'>About</a></li>
	<li><a href='javascript:void(0)'>Projects</a></li>
	<li><a href='javascript:void(0)'>Partners</a></li>
	<li><a href='javascript:void(0)'>Contacts</a></li>
</ul>
</div>
</body>
</html>

当我将鼠标悬停在<li>上时，它只会更改背景颜色。文本的颜色不起作用。请帮忙！非常感谢！

Answer 1

您需要将颜色更改为li:hover > a

body {font-family: sans-serif}
ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
}
a {
	text-decoration: none;
    color: white;
    font-size: 18px;
}
li {
	padding: 10px 18px;
    float: left;
    transition: color 0.2s, background 0.2s;
}
li:hover {
    background: white;
}
li:hover a {
    color: black;
}

<div class='nav'>
<ul>
	<li><a href='javascript:void(0)'>Home</a></li>
	<li><a href='javascript:void(0)'>About</a></li>
	<li><a href='javascript:void(0)'>Projects</a></li>
	<li><a href='javascript:void(0)'>Partners</a></li>
	<li><a href='javascript:void(0)'>Contacts</a></li>
</ul>
</div>

Answer 2

因为有color:white。因此，您可以在悬停时给出颜色a或制作inherit并为li赋予颜色。

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
}
a {
	text-decoration: none;
    color: inherit;
    font-size: 18px;
}
li {
	padding: 10px 18px;
    float: left;
    color:#fff;
    transition: color 0.2s, background 0.2s;
}
li:hover {
    color: black;
    background: white;
}

</style>
</head>
<body>
<div class='nav'>
<ul>
	<li><a href='javascript:void(0)'>Home</a></li>
	<li><a href='javascript:void(0)'>About</a></li>
	<li><a href='javascript:void(0)'>Projects</a></li>
	<li><a href='javascript:void(0)'>Partners</a></li>
	<li><a href='javascript:void(0)'>Contacts</a></li>
</ul>
</div>
</body>
</html>

Answer 3

您正在为li标签添加样式，以更改背景颜色而不是文本颜色。标记选择标记为这样 - ＆gt; li a：hover {color：＃000;背景：#fff;}

希望这能解决你的问题..

我的建议是以十六进制代码给出颜色名称，这是将样式赋予颜色的最佳实践。

Answer 4

您最初为a选择器而不是li分配颜色。像这样的简单开关应该可以使它工作（我包括你的整个片段加上我的更改，以便你可以看到预览）：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
}
a {
	text-decoration: none;
    color: white;
    font-size: 18px;
}
li {
	padding: 10px 18px;
    float: left;
    transition: color 0.2s, background 0.2s;
}
/* This is the changed part */
li:hover {
    background: white;
}
li:hover a {
    color: black;
}

</style>
</head>
<body>
<div class='nav'>
<ul>
	<li><a href='javascript:void(0)'>Home</a></li>
	<li><a href='javascript:void(0)'>About</a></li>
	<li><a href='javascript:void(0)'>Projects</a></li>
	<li><a href='javascript:void(0)'>Partners</a></li>
	<li><a href='javascript:void(0)'>Contacts</a></li>
</ul>
</div>
</body>
</html>

＆＃13;

颜色过渡不起作用

4 个答案: