我是 html 和 css 的新手。
我正在尝试为页面底部的小导航栏添加悬停效果。文本周围有边框，里面有文本，我希望悬停效果反转设计，使边框的颜色成为按钮的背景，文本是页面背景颜色。
因为这些是我其他页面的链接，所以我不得不将 css 添加到“li a”，但现在我的悬停效果不会影响文本，除非您将鼠标悬停在它上面。
这是我所拥有的:
nav{
position: fixed;
bottom: 0%;
left: 0%;
right: 00%;
display: block;
text-align: center;
}
ul{
padding: 0px;
display: inline-block;
}
li {
font-family: Open Sans, sans-serif;
font-size: 10px;
font-weight: 100;
line-height: 25px;
text-align: center;
width: 100px;
border: solid #383838;
border-width: 1px;
color: #383838;
list-style-type: none;
float: left;
margin: 5px;
}
li a{
color: #7f7f7f;
text-decoration: none;
}
li:hover{
background: #7f7f7f;
color: #000000;
}
li a:hover{
background: #7f7f7f;
color: #000000; <body>
<nav>
<ul>
<li><a href="#">BLACK & GOLD</a></li>
<li><a href="#">BLACK & WHITE</a></li>
<li><a href="#">WHITE & GOLD</a></li>
<li><a href="#">WHITE & BLACK</a></li>
</ul>
</nav>
</body>任何人都可以让我知道我需要做什么来解决这个问题。
谢谢 蒂姆
最佳答案
从您的 <a> 更改悬停选择器给你的<li> .
这样，由于 CSS 的级联特性，如果悬停父列表项，您的链接将采用不同的样式。
nav {
position: fixed;
bottom: 0%;
left: 0%;
right: 00%;
display: block;
text-align: center;
}
ul {
padding: 0px;
display: inline-block;
}
li {
font-family: Open Sans, sans-serif;
font-size: 10px;
font-weight: 100;
line-height: 25px;
text-align: center;
width: 100px;
border: solid #383838;
border-width: 1px;
color: #383838;
list-style-type: none;
float: left;
margin: 5px;
}
li a {
color: #7f7f7f;
text-decoration: none;
}
li:hover {
background: #7f7f7f;
color: #000000;
}
li:hover a {
background: #7f7f7f;
color: #000000;
}<body>
<nav>
<ul>
<li><a href="#">BLACK & GOLD</a></li>
<li><a href="#">BLACK & WHITE</a></li>
<li><a href="#">WHITE & GOLD</a></li>
<li><a href="#">WHITE & BLACK</a></li>
</ul>
</nav>
</body>关于html - 试图获得悬停效果以影响 a & a ul，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49955550/