背景覆蓋文字

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