Question

我公认html / css并不是最好的选择，但是像这样的似乎应该很容易。但是，我花了很多年的时间进行谷歌搜索和试验，但仍然没有骰子。我正在尝试淡化单击（而不是悬停）在另一个图像上的图像的叠加。从语法上来说这是一个可怕的句子。
什么？覆盖图像。
在哪里？在另一张图片上。
如何？居中，淡入/淡出。
什么时候？点击时。

我一直在尝试合并https://www.w3schools.com/howto/howto_css_image_overlay.asp和https://www.w3schools.com/howto/howto_css_overlay.asp中的代码，但运气不好。我已经尝试过基于Fade div in and out using the same link onclick的toggle（），但显然仍然做错了。

这就是我现在所拥有的（我敢肯定这是一团糟）
http://jsfiddle.net/xvdptw6L/1/

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/*.container:hover .image {
  opacity: 0.3;
}
.container:hover .middle {
  opacity: 1;
}*/
.overlay {
}
</style>
</head>
<body>

<div class="container">
  <img src="https://www.ningenlife.com/pub/media/catalog/product/cache/c687aa7517cf01e65c009f6943c2b1e9/u/c/ucc-93553-3.jpg" class="image" style="width:100%">
  <div class="middle">
    <img src="https://www.pokemoncenter.com/wcsstore/PokemonCatalogAssetStore/images/catalog/products/P3486/701-02860/P3486_701-02860_01.jpg" class="overlay" style="width:100%">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
$('.image').click(function(e){    
    $('.overlay').toggle('fast');
});
</script>

</body>
</html>

当注释掉的代码在播放时，第二张图像以我想要的方式淡出，但当不是时，js则不执行任何操作。请帮我看看我要去哪里错了。

*在下面完美回答，只需添加w3schools和工作版本的小提琴编辑器以进行复制/粘贴，或者如果将来有人需要此解决方案，则可以轻松地使用代码
https://www.w3schools.com/code/tryit.asp?filename=G3T58QO5TYOY < br /> http://jsfiddle.net/curfohwy/

Answer 1

只需在包含的div上单击添加一个类，然后您就可以按照自己的喜好来操纵css，如下所示：

$('.container').click(function(e){    
    $(this).toggleClass('active');
});

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container.active .image {
  opacity: 0.3;
}

.container.active .middle {
  opacity: 1;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
  <div class="container">
  <img src="https://www.ningenlife.com/pub/media/catalog/product/cache/c687aa7517cf01e65c009f6943c2b1e9/u/c/ucc-93553-3.jpg" class="image" style="width:100%">
  <div class="middle">
    <img src="https://www.pokemoncenter.com/wcsstore/PokemonCatalogAssetStore/images/catalog/products/P3486/701-02860/P3486_701-02860_01.jpg" class="overlay" style="width:100%">
  </div>
</div>

单击时覆盖图像居中的图像

1 个答案: