背景叠加文本

Question

DEMO

正如你在我的jsbin中看到的那样，背景覆盖了我的三个链接对象中的文本（将光标移到它上面以查看它）。

我已尝试使用z-index（由朋友建议），但这似乎没有任何效果。

你会如何修复它？

Answer 1

这是相关的CSS：

a {
    color: #CCCCCC;
 }

a:hover {
    background-color: #CCCCCC;
}

如您所见，悬停时字体颜色和背景颜色相同。 z-index与它无关。更改color上的:hover，您会看到文字，如此小提琴所示：http://jsfiddle.net/yVdvx/

Answer 2

更改此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;
        }

To（我的例子：a：悬停颜色为蓝色）：

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文件中可能会更好。