CSS/HTML文本onhover不会改变

Question

我想样式菜单栏的颜色。 如果li是“active”，那么文本颜色和边框颜色应该是蓝色的，否则一切都是灰色的。 悬停时，灰色应变成蓝色。

我试过了，但不起作用。这是我的代码：

@import 'https://fonts.googleapis.com/css?family=Fjalla+One'; 
 
ul.dnav { 
 
    list-style-type: none; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    overflow: hidden; 
 
    width: 400px; 
 
    -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
} 
 
li.dnav { 
 
    font-size: 20px; 
 
    background-color: #FFF; 
 
    width: 100px; 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 0px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
} 
 
li.dnav a { 
 
    color: grey; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
} 
 
li.dnav a:hover { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
    border-color: rgba(0, 130, 255, 1); 
 
} 
 
a:active { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
} 
 
li.dnav-active { 
 
    border-color: rgba(0, 130, 255, 1); 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
    color: rgba(0, 130, 255, 1); 
 
}

<header> 
 
    <ul class="dnav"> 
 
    <li class="dnav dnav-active"><a class="active" href="#">Home</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">ser</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">con</a> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 1

的问题是你是在悬停选择瞄准的“a”元素。 边框放置在'li'元素上。

所以当你在元素上方盘旋时，只有'a'元素的边界在改变。

你可以改写你的CSS悬停时的目标（如我在代码段中所做的那样），但我可以推荐完整样式'a'元素而不是'li'。

在悬停下方的代码片段中，对“悬停”选择器进行了小改动。

@import 'https://fonts.googleapis.com/css?family=Fjalla+One'; 
 
ul.dnav { 
 
    list-style-type: none; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    overflow: hidden; 
 
    width: 400px; 
 
    -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
} 
 
li.dnav { 
 
    font-size: 20px; 
 
    background-color: #FFF; 
 
    width: 100px; 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 0px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
} 
 
li.dnav a { 
 
    color: grey; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
} 
 

 
li.dnav:hover { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
    border-color: rgba(0, 130, 255, 1); 
 
} 
 
a:active { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
} 
 
li.dnav-active { 
 
    border-color: rgba(0, 130, 255, 1); 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
    color: rgba(0, 130, 255, 1); 
 
}

<header> 
 
    <ul class="dnav"> 
 
    <li class="dnav dnav-active"><a class="active" href="#">Home</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">ser</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">con</a> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 2

您只需为所包含a标签设置你的悬停规则。我增加了一个单独的规则来进行li元素在下面的代码段正在徘徊：

li.dnav:hover { 
    border-color: rgba(0, 130, 255, 1); 
} 

@import 'https://fonts.googleapis.com/css?family=Fjalla+One'; 
 
ul.dnav { 
 
    list-style-type: none; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    overflow: hidden; 
 
    width: 400px; 
 
    -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
    box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1); 
 
} 
 
li.dnav { 
 
    font-size: 20px; 
 
    background-color: #FFF; 
 
    width: 100px; 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 0px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
} 
 
li.dnav a { 
 
    color: grey; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
} 
 
li.dnav a:hover { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
    border-color: rgba(0, 130, 255, 1); 
 
} 
 
li.dnav:hover { 
 
    border-color: rgba(0, 130, 255, 1); 
 
} 
 
a:active { 
 
    background-color: #fff; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    color: rgba(0, 130, 255, 1); 
 
} 
 
li.dnav-active { 
 
    border-color: rgba(0, 130, 255, 1); 
 
    border-bottom-width: 5px; 
 
    border-left-width: 0px; 
 
    border-top-width: 0px; 
 
    border-right-width: 0px; 
 
    color: rgba(0, 130, 255, 1); 
 
}

<header> 
 
    <ul class="dnav"> 
 
    <li class="dnav dnav-active"><a class="active" href="#">Home</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">ser</a> 
 
    </li> 
 
    <li class="dnav"><a href="#">con</a> 
 
    </li> 
 
    </ul> 
 
</header>