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

Question

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

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

我在下面创建了一个代码笔演示：

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

你应该试试这个。

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

$box_each.click(function() {
  if ($(this).hasClass("clicked")) {
    $(this).addClass("unclicked");
    $(this).removeClass("clicked");
  } else {
    $(this).removeClass("unclicked");
    $(this).addClass("clicked");
    $box_each.css("opacity", "0.2");
    $(this).css("opacity", "1");
  }
});

.boxes img {
  opacity: 0.2;
}
.boxes img:hover {
  opacity: 1;
}
.clicked {
  opacity: 1 !important;
}
.unclicked {
  opacity: 0.2 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="boxes">
  <img src="http://lorempixel.com/50/50/">
  <img src="http://lorempixel.com/50/50/">
  <img src="http://lorempixel.com/50/50/">
  <img src="http://lorempixel.com/50/50/">
</div>

Answer 2

您的悬停效果在单击后不起作用，因为您在 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

Answer 3

如果你想保留不透明效果以便申请多张图片，我想你可以试试这个。

HTML:

<div id="boxes">
  <img class="boxes-normal" src="http://lorempixel.com/50/50/">
  <img class="boxes-normal" src="http://lorempixel.com/50/50/">
  <img class="boxes-normal" src="http://lorempixel.com/50/50/">
  <img class="boxes-normal" src="http://lorempixel.com/50/50/">
</div>

css:

.boxes-normal{
  opacity: 0.2;
}

.boxes-normal:hover {
  opacity: 1;
}

.boxes-opaque{
  opacity: 1;
}

JavaScript:

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

$box_each.click(function() {
    if($(this).hasClass('boxes-normal')){
      $(this).removeClass('boxes-normal');
      $(this).addClass('boxes-opaque');
    } else if($(this).hasClass('boxes-opaque')){
      $(this).removeClass('boxes-opaque');
      $(this).addClass('boxes-normal');
    }
    });

希望这对您有所帮助..

DEMO

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

How to keep hover styling even after an element is clicked? (jQuery)

javascript

jquery

click

opacity

HTML:

css:

JavaScript: