html - 背景オーバーレイ テキスト

Question

デモ

jsbin でわかるように、背景が 3 つのリンク オブジェクトのテキストに重なっています (カーソルをその上に移動すると表示されます)。

（友人の提案に従って）z-indexを試してみましたが、効果がないようです。

どのように修正しますか？

Answer 1

この 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ファイルに読み込むのも良いかもしれません。