javascript - 如何在单击元素后保持悬停样式？ (jQuery)

Question

我有四个具有悬停样式的按钮元素(从 0.2 不透明度到 1 不透明度)。然后，我使用 jQuery，以便在单击特定按钮后，它的不透明度变为 1(某种标记，表明它是已单击的按钮)，而其他未单击的按钮的不透明度为 0.2。

但是，在单击之后，由于我强制每个未单击的按钮的不透明度都为 0.2，因此 css 悬停样式不再有效。

我在下面创建了一个 codepen 演示:

jQuery:

var $box_each = $(".boxes img");
    $box_each.click(function() {
        $box_each.css("opacity", "0.2");
        $(this).css("opacity", "1");
    });

http://codepen.io/aguerrero/pen/Bjzjrx

我该如何解决这个问题，以便在任何给定时间只有一个不透明度为 1 的元素时保留所有悬停样式？

Answer 1

您的悬停效果在单击后不起作用，因为您在 Jquery 中提供了内联样式。

您可以执行以下操作:

var $box_each = $(".boxes img");

$box_each.click(function() {
        $box_each.removeClass('active');
        $(this).addClass('active');
    });

CSS:

.boxes img {
  opacity: 0.2;
}

.boxes img:hover {
  opacity: 1;
}

.boxes img.active {
  opacity: 1;
}

DEMO