试图获得悬停效果以影响 a & a ul

Question

我是 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 &amp; GOLD</a></li>
            <li><a href="#">BLACK &amp; WHITE</a></li>
            <li><a href="#">WHITE &amp; GOLD</a></li>
            <li><a href="#">WHITE &amp; BLACK</a></li>
        </ul>
    </nav>
</body>

任何人都可以让我知道我需要做什么来解决这个问题。

谢谢蒂姆

Answer 1

将悬停选择器从您的 <a> 更改为您的 <li>。这样，由于 CSS 的级联特性，如果悬停其父列表项，您的 link 的样式将有所不同。

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 &amp; GOLD</a></li>
            <li><a href="#">BLACK &amp; WHITE</a></li>
            <li><a href="#">WHITE &amp; GOLD</a></li>
            <li><a href="#">WHITE &amp; BLACK</a></li>
        </ul>
    </nav>
</body>

试图获得悬停效果以影响 a & a ul

Trying to get hover effect to effect an a & a ul

html

css

anchor

hover

html-lists