背景覆盖文字

Question

DEMO

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

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

你将如何去解决它？

Answer 1

下面是相关的CSS：

a { 
    color: #CCCCCC; 
} 

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

正如你所看到的，字体颜色和背景颜色是上悬停相同。 Z指数与它无关。在:hover上更改color，您将看到如下所示的文本：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文件。