javascript - 使用 jQuery 在单击时叠加在图像上

Question

现在，当我点击一张图片时，它会将整个页面设置为具有 60% 的透明度。 我只是想影响被点击的图像本身。

我使用的是 Bootstrap，因此图像的高度/宽度可能会略有不同。

演示: http://jsfiddle.net/txrt6zo1/

$(".thumb-overlay-content").on('click',function() {
    $(this).toggleClass('rotateOut rotateIn');
});

.thumb-overlay-content { margin:10px; background:#CCC; float:left; text-align:center; padding:0px; }
.rotateOut { border:3px solid blue; }
.rotateIn { border:3px solid green; background:green; }
.rotateIn .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.rotateIn .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

Answer 1

您需要将 position: relative 放在 .thumb-overlay-content CSS 中。这将使 absolve .after div 相对于其容器的位置。

$(".thumb-overlay-content").on('click', function() {
  $(this).toggleClass('rotateOut rotateIn');
});

.thumb-overlay-content {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
}

.rotateOut {
  border: 3px solid blue;
}

.rotateIn {
  border: 3px solid green;
  background: green;
}

.rotateIn .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.rotateIn .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>