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>