jsbin でわかるように、背景が 3 つのリンク オブジェクトのテキストに重なっています (カーソルをその上に移動すると表示されます)。
(友人の提案に従って)z-indexを試してみましたが、効果がないようです。
どのように修正しますか?
この CSS コードを変更します。
から:
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: #CCCCCC;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
(私の例では a:hover の色を青にします):
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: blue;
color: #393434;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
また、別ファイルにCSSコードを入れてHTMLファイルに読み込むのも良いかもしれません。