jQuery，缩略图不透明度

我想在jQuery中创建一个照片库，要做到这一点，我希望第一个缩略图的不透明度为1，所有其他缩略图的不透明度为0.5，当我的鼠标位于缩略图上方时，这个缩略图的不透明度将为1，当我的鼠标退出时，不透明度将返回到0.5。 所以我做了所有这些，问题是我不希望我点击的缩略图有“mouseover”，“mouseout”代码，所以我做的是：

var selector = $('.thumb:first');

然后

$（'.thumb'）.css（'opacity'，'0.5'）； });

及

---

但它不起作用，当我的鼠标离开我点击的最后一个缩略图时，缩略图的不透明度将变为0.5，而不是保持在1，听起来CSS可以为您处理！请参阅

first child

或

first of type

psuedo选择器。通过将这样的表示逻辑从JS中移到CSS中，您可以帮助您自己和您的开发伙伴在将来摆脱困境。

selector！=$（此）

将始终计算为

true

，因为它们是使用

new

关键字创建的独立对象实例。因此，同样地

$（这个）！=$（此）

也将始终计算为

true

尝试将类添加到thumbs并以这种方式进行比较

var classStr = $('.thumb:first').attr('class');

然后在事件处理程序中：

if ($(this).attr('class') !== classStr) {
    // elements are not the same
}

---

您可以向单击的thumb添加一个类，并检查thumb是否在mouseover事件中具有该类

$('.thumb').click(function() {
    $(this).addClass('clicked');
    $(this).css('opacity','1');
});

$('.thumb').mouseover(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','0.5');
    }
});

JS:

CSS:

​ ​

选择器！=$（这）将始终评估为真。尝试将类添加到thumbs并以这种方式进行比较

if ($(this).attr('class') !== classStr) {
    // elements are not the same
}

$('.thumb').click(function() {
    $(this).addClass('clicked');
    $(this).css('opacity','1');
});

$('.thumb').mouseover(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','0.5');
    }
});

$('.thumb:first').addClass("selected");

$('.thumb').click(function() {
  $('.thumb.selected').removeClass("selected");
  $(this).addClass("selected");
});

.thumb { opacity: 0.5; }
.thumb:hover { opacity: 1; }
.thumb.selected { opacity: 1; }
.thumb.selected:hover { opacity: 1; }