javascript - 为特定的悬停图像应用 css

Question

我正在尝试将 css 应用于特定的悬停图像，但我的代码在仅悬停 1 张图像时将 css 应用于所有图像。

$(document).ready(function() {
  $('.vidUrl').on('hover', function() {
    $('.thumb-overlay').toggle();
  });
});

.thumb {
  height: 100px;
  width: 100%;
  object-fit: cover;
}

.thumb-overlay {
  background-image: url('http://www.denys.be/assets/images/play.png');
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  background-color: #00000073;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative;">
  <a href="#" class="vidUrl">
    <div class="thumb-overlay"></div>
    <img class="thumb" src="http://lorempixel.com/300/200/">
  </a>
</div>
<div style="position: relative;">
  <a href="#" class="vidUrl">
    <div class="thumb-overlay"></div>
    <img class="thumb" src="http://lorempixel.com/300/200/">
  </a>
</div>

正确的做法是什么？谢谢。

Answer 1

$(document).ready(function() {
  $('.VIDEO_PARENT_CLASS').hover(function() {
    $(this).find('.thumb-overlay').toggle();
  });
});

.thumb {
  height: 100px;
  width: 100%;
  object-fit: cover;
}

.thumb-overlay {
  background-image: url('http://www.denys.be/assets/images/play.png');
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  background-color: #00000073;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="VIDEO_PARENT_CLASS" style="position: relative;">
  <a href="#" class="vidUrl">
    <div class="thumb-overlay"></div>
    <img class="thumb" src="http://lorempixel.com/300/200/">
  </a>
</div>
<div class="VIDEO_PARENT_CLASS" style="position: relative;">
  <a href="#" class="vidUrl">
    <div class="thumb-overlay"></div>
    <img class="thumb" src="http://lorempixel.com/300/200/">
  </a>
</div>