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

【问题标题】：Trying to get hover effect to effect an a & a ul试图获得悬停效果以影响 a & a ul
【发布时间】：2018-04-21 20:05:32
【问题描述】：

我是 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>

谁能告诉我我需要做什么来解决这个问题。

谢谢蒂姆

【问题讨论】：

标签： html css hover html-lists anchor

【解决方案1】：

将悬停选择器从您的 <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 &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>

【讨论】：