悬停每个 div 但悬停的一个

Question

我想在 hover module-wrap div 之后在 0.3 上设置其他不透明度并且只显示 hovered div。我在 css:

中做了类似的东西

我有类似的东西：

.wrap:hover .module-wrap:not(:hover) {
  opacity: 0.3;
}

.wrap:hover>*:hover {
  opacity: 1;
}

<div class="wrap">
  <div class="module-wrap">
    <p>something</p>
  </div>
  <div class="module-wrap">
    <p>something</p>
  </div>
  <div class="module-wrap">
    <p>something</p>
  </div>
  <div class="module-wrap">
    <p>something</p>
  </div>
</div>

有效 - 当我将鼠标悬停在一个元素上时，其他元素设置为 opacity: 0.3。但是当我将鼠标悬停在 wrap 上时，它会使所有内容的不透明度都设置为 0.3。我只想将它设置在 divs 上，当我将鼠标悬停在 div 以外的其他地方时，使其不透明度为 1。我该怎么做？

https://jsfiddle.net/69n8y4hb/3/

Answer 1

我猜你正在寻找这样的东西（JQuery）：

$('.module-wrap').hover(
  function() {
    $('.module-wrap').css('opacity', '0.3')
    $(this).css('opacity', '1')
  }, function() {
    $('.module-wrap').css('opacity', '1');
  }
)

悬停每个 div 但悬停的一个

Hover every div but one that' hovered

html

css

hover