很奇怪的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 /不透明度/悬停问题

回答

相关问题