很奇怪的CSS /不透明度/懸停問題

對不起，我真的想不出如何簡化這個問題。現在很奇怪的CSS /不透明度/懸停問題

，問題是這樣的：我有縮略圖的行中的DIV：

<div id="daumen"> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image1.jpg' class='thumbnails' /> 
</a> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image2.jpg' class='current-thumbnail'/> 
</a> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image3.jpg' class='thumbnails' /> 
</a> 

</div>

（我不能改變的HTML，它是由一個腳本交付）

由於你可能已經注意到了，其中兩個有「縮略圖」類和一個「當前縮略圖」。

我想要發生的是：默認情況下，除當前縮略圖以外的所有圖像的不透明度均爲0.5。鼠標懸停，不透明度應更改爲1

的CSS我使用：

#daumen { 

    } 

#daumen img:hover{ 
     filter:alpha(opacity=100); 
     -moz-opacity:1; 
     -khtml-opacity: 1; 
     opacity: 1; 
    } 

#daumen img{ 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
    } 

.current-thumbnail a:link{ 
     filter:alpha(opacity=100); 
     -moz-opacity:1; 
     -khtml-opacity: 1; 
     opacity: 1; 
    }   

.thumbnails { 

    } 

.current-thumbnail { 

}

到目前爲止，這一切工作，除了當前的縮略圖的不透明度也被設置到0.5 - 我該如何避免這種情況？

我確信有一個非常簡單的解決方案，但我已經擺弄了很久很久以前的CSS。

我把它放在一個搗鼓你：提前http://jsfiddle.net/6DGAx/

感謝，的Cenk

來源

2010-07-17 Cenk

使它成爲一個更具體的選擇：

#daumen .current-thumbnail a:link{

此外，確保您的標記匹配你的CSS因爲你的img有那個類.........

來源

2010-07-17 21:58:12

爲了澄清，根據CSS選擇器的具體特點，樣式被賦予優先級。通過將#daumen id附加到類選擇器的前面，它會比「#daumen img」選擇器更具體，並且使用了不透明度。 – 2010-07-17 22:05:42

是的！這和Hrishi的回答結合起來使它成功了。非常感謝！ – Cenk 2010-07-17 22:12:14

此外，始終按此順序定義您的僞鏈接選擇器：鏈接，訪問，活動，懸停。 LVHA，記得我組建拉斯維加斯妓女協會，從來沒有去過那裏，但聽說他們有名片。沒有僞選擇器的{}將定義它們的默認設置，並且應該先放置。 – joelpittet 2010-07-17 22:31:57

應該

#daumen .thumbnail{

，而不是

#daumen img{

，如果你想選擇類縮略圖全部

來源

2010-07-17 22:04:50 Hrishi

非常感謝，這和meder的回答完美:) 我只能設置一個答案爲接受，對不起。 – Cenk 2010-07-17 22:13:21

首先你錯誤地定位你的元素，因爲與元素內部沒有acurrent-thumbnail根據您目前的規則建議（.current-thumbnail a:link）

它應該是#daumen .current-thumbnail

來源

2010-07-17 22:08:40

很奇怪的CSS /不透明度/懸停問題

回答

相關問題