2017-06-01 103 views
0

嗨,我有這一塊的CSS:CSS樣式不起作用

tbody:hover td { 
    color: transparent; 
    text-shadow: 0 0 3px #aaa; 
} 

tbody:hover tr:hover td { 
    color: #444; 
    text-shadow: 0 1px 0 #fff; 
} 

當我將鼠標懸停表我想,該表的其他行變得透明瞭一排。這個CSS爲普通的td充滿了文本,但對於填充了鏈接(一個標籤)的td不起作用。我找不到原因。

這是HTML代碼

<tbody> 
    <tr> 
     <td>Untitled.txt</td> 
     <td>File di prova</td> 
     <td><a href='/comment/comment.php?idF=182' style='color: black;'>Leggi i commenti</a></td>   
     <td><a href='get_file.php?id=182' style='color: black;'>Download</a></td> 
    </tr> 
</tbody> 
+1

請分享html代碼 – Ehsan

+0

如果我刪除了tbody:hover,css根本不起作用 – Interseba5

+0

您需要將錨色設置爲繼承{color:inherit},以便獲取父級的顏色 – karthick

回答

1

這很簡單。你的標籤有嵌入式樣式。那些在CSS等級中排名很高。那麼,爲什麼這不工作的原因是這段代碼:

style='color: black;' 

刪除內聯樣式,並通過類應用它來代替。

+0

非常感謝,我是一個noob – Interseba5

1

的一部分,我不知道是否有可能讓別人使用CSS透明只(CSS不能在以前的兄弟姐妹效應)。但是,您不能使用:hover兩次,除非你做這樣的事情:

tbody tr:hover > td, tbody tr:hover > td a { 
    color: #444; 
    text-shadow: 0 1px 0 #fff; 
} 

爲了尋找透明度問題的解決方案,你可以嘗試使用nth-child()來決定哪些孩子會懸停改變。例如:

tbody tr:nth-child(1):hover { 
    color: transparent; 
    text-shadow: 0 0 3px #aaa; 
} 

您也可以決定怎麼辦時,該元素是不徘徊,例如:

tbody tr:nth-child(1):not(:hover) { 
    // If element is not hovered 
    color: transparent; 
    text-shadow: 0 0 3px #aaa; 
} 
0

嘗試使用inherit屬性:

a { 
    color: inherit !important; //important just for extra measure 
} 
+0

謝謝,我不把它標記爲解決方案,因爲在HTML中還有另一個更重要的錯誤,另一個解決它 – Interseba5

+0

啊該死的。沒關係。 – TheDarkKnight

0

我想你應該把CSS中的標籤也是如此。

tbody:hover td, tbody:hover td a { 
    color: transparent; 
    text-shadow: 0 0 3px #aaa; 
}