将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() {
  $('.vidUrl').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 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 2

$(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>

Answer 3

在你写的下面的代码中。它将适用于所有图像，因为所有图像都具有相同的名为".thumb-overlay"的类。

<script type="text/javascript">
    $(document).ready(function(){
        $('.vidUrl').on('hover', function(){
            $('.thumb-overlay').toggle();
        });
    });
</script>

您应该更改以下代码：

<script type="text/javascript">
        $(document).ready(function(){
            $('.vidUrl').on('hover', function(){
                $(this).find('.thumb-overlay').toggle();
            });
        });
    </script>

我们知道$(this)指出当前的对象。所以它只会在当前图像上应用CSS。

Answer 4

为什么用JS复杂化这个问题。这是一个简单的CSS解决方案：

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

.vidUrl {
  position: relative;
  display:block;
}

.vidUrl:before {
  content:"";
  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;
}

.vidUrl:hover:before {
  display: block;
}

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