主页 / 问题 / 1406303
Accepted
steep
Asked:2022-07-04 03:00:12 +0000 UTC2022-07-04 03:00:12 +0000 UTC

单击时更改图像？

  • 772

如何制作相同的图片替换效果，只在点击时？可能toggleClass应该使用，但如何？

$(".card-image").click(function() {
  $(".card-image img").toggleClass("transparent");
});
.card-image img {
  display: block;
  border-radius: 2px 2px 0 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.card-image img.first {
  position: absolute;
  opacity: 0;
  transition: all 0.5s ease;
}

.card-image:hover img.first {
  opacity: 1;
  transition: all 0.5s ease;
}

.card-image img.second {
  transition: all 0.5s ease;
}

.card-image:hover img.second {
  opacity: 0;
  transition: all 0.5s ease;
  transform: scale(0, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-image">
  <img class="second" src="https://isstatic.askoverflow.dev/kSOSd.jpg">
  <img class="first" src="https://isstatic.askoverflow.dev/17BmD.jpg">
</div>

javascript jquery

1 个回答

  1. Best Answer

    $(".card-image").click(function() {
  $(".card-image img").toggleClass("active");
});
    .card-image img {
  position: absolute;
  border-radius: 2px 2px 0 0;  
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transition: all 0.5s ease;
  opacity: 0;
  transform: scale(0,1);      
}

.card-image img.active {
  opacity: 1;  
  transform: scale(1);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-image">
  <img class="second" src="https://isstatic.askoverflow.dev/kSOSd.jpg">
  <img class="first active" src="https://isstatic.askoverflow.dev/17BmD.jpg">
</div>

    • 4

相关问题