我的简单水平导航栏存在特定问题。当我为整个ul设置background-color时,我只在悬停上更改了文本,而没有更改背景。我试图设置li:hover和a:hover,但是一切都一样。例如,当我为background-color属性设置不同的颜色(黑色,红色...)时,一切都很好,但是使用rgba值时,它在大于600px的屏幕上不起作用。我希望对两者都具有相同的效果,并且仅设置不同的颜色会造成问题,如我所见。有人可以告诉我我的错误在哪里,我该如何解决?
这是我的密码
Monodevelop
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30);
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li>a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li:hover a {
background-color: rgba(44, 33, 30, 0.8);
color: sandybrown;
}
答案 0 :(得分:2)
如有可能,将悬停效果应用于锚标记
a:hover {}
答案 1 :(得分:1)
:hover的选择器太弱:它应该类似于无悬浮物:
.item2 ul li > a {}
.item2 ul li > a:hover {}
这对我很有效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li > a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 ul li > a:hover {
color: sandybrown;
background-color: red;
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30);
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li > a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 ul li > a:hover {
background-color: yellow;
color: sandybrown;
}
}
</style>
</head>
<body>
<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>
</body>
</html>
答案 2 :(得分:1)
您在这里遇到的问题是由于使用这种样式引起的:
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30); <--- container background.
}
}
具有相同的背景,因此元素不会清楚地显示背景rgba()
,我更改为color:#CCC
,以便您注意到该问题:
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: #CCC;
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li>a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li:hover a {
background-color: rgba(44, 33, 30, 0.8);
color: sandybrown;
}
<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>