CSS/HTMLテキストの切り替えが行われない

Question

メニューバーの色を変更したい。 liが "アクティブ"の場合、テキストの色と境界線の色は青色になります。そうでない場合はすべてが灰色です。 ホバーでは、灰色が青色に変わります。

私は試しましたが動作しません。あなたが含まaタグにのみ、あなたのホバールールを設定

@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

問題は、あなたがホバーセレクターで「」要素をターゲットにしているです。 境界線は代わりに 'li'要素に配置されます。

したがって、elemenntの上にカーソルを置いているときは、 'a'要素の境界線のみが変化しています。

ホバリング時にLIをターゲットにするCSSを書き直すことができます（私がスニペットで行ったように）が、 'li'の代わりに 'a'要素を完全にスタイルすることをお勧めします。

下のコードスニペットでは、ホバーは「ホバー」セレクターの小さな変更で機能します。

@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

：これは私のコードです。私は以下のスニペットで推移している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>