html - 背景覆盖文本

Question

演示

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

我已经尝试过使用 z-index（如朋友所建议的那样），但这似乎没有任何效果。

你会如何修复它？

Answer 1

这是相关的CSS：

a {
    color: #CCCCCC;
 }

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

如您所见，悬停时字体颜色和背景颜色相同。z-index 与它无关。更改coloron :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;
        }

到（我的示例使：悬停颜色为蓝色）：

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 文件中。