Question

对不起标题，我真的想不出如何简化这个问题。

现在，问题在于：我在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

Answer 1

使其成为更具体的选择器：

#daumen .current-thumbnail a:link{

此外，确保您的标记与您的CSS匹配，因为您的img有该类.........

Answer 2

应该是

#daumen .thumbnail{

而不是

#daumen img{

如果要选择班级缩略图

Answer 3

首先，您错误地定位了元素，因为当前规则建议（a）

时，元素current-thumbnail内没有.current-thumbnail a:link

应为#daumen .current-thumbnail

相当怪异的CSS /不透明度/悬停问题

3 个答案: