javascript - 使用 jQuery 仅针对元素列表中的悬停元素

Question

我想做的是只选择，在这种情况下悬停，元素替换为视频。现在，当其中一个元素悬停时，所有共享同一类的元素都会被替换。

这里是 codepen .

我读过有关使用 $(this) 的信息，但我不知道如何在这里实现它。

知道如何实现吗？谢谢。

代码也在这里:

HTML:

<div class="main-parent">
  <div class="img-container">
  <div class="video_overlays">
    <a href="http://dev.mintv.rs/sta-je-i-kako-se-pravi-zanatsko-pivo" target="_blank">
      <img src="http://dev.mintv.rs/wp-content/uploads/2017/02/1a-1.jpg" alt="Thumb" class="thumb_image" />
      <video class="thumbnail_player" src="http://dev.mintv.rs/wp-content/uploads/2017/02/Kabinet.mp4" type="video/mp4" autoplay loop></video>
    </a>
  </div>
  <span class="duration">03:13</span>
</div>
<div class="desc"><p>Title</p></div>
</div>

<div class="main-parent">
  <div class="img-container">
  <div class="video_overlays">
    <a href="http://dev.mintv.rs/sta-je-i-kako-se-pravi-zanatsko-pivo" target="_blank">
      <img src="http://dev.mintv.rs/wp-content/uploads/2017/02/1a-1.jpg" alt="Thumb" class="thumb_image" />
      <video class="thumbnail_player" src="http://dev.mintv.rs/wp-content/uploads/2017/02/Kabinet.mp4" type="video/mp4" autoplay loop></video>
    </a>
  </div>
  <span class="duration">03:13</span>
</div>
<div class="desc"><p>Title</p></div>
</div>

<div class="main-parent">
  <div class="img-container">
  <div class="video_overlays">
    <a href="http://dev.mintv.rs/sta-je-i-kako-se-pravi-zanatsko-pivo" target="_blank">
      <img src="http://dev.mintv.rs/wp-content/uploads/2017/02/1a-1.jpg" alt="Thumb" class="thumb_image" />
      <video class="thumbnail_player" src="http://dev.mintv.rs/wp-content/uploads/2017/02/Kabinet.mp4" type="video/mp4" autoplay loop></video>
    </a>
  </div>
  <span class="duration">03:13</span>
</div>
<div class="desc"><p>Title</p></div>
</div>

CSS:

.main-parent {
  width: 360px;
}

.img-container {
  height: 202px;
  width: 360px;
  position: relative;
}

.video_overlays {
  position: absolute;
  width: 360px;
  min-height: 100%;
  background-color: rgba(15, 15, 15, 0);
  z-index: 300000;
}

.video_overlays video {
  display: none;
}

.duration {
  z-index: 300001;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0px 6px;
  color: #fff;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.66);
  line-height: 24px;
}

.desc {
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

js:

jQuery('.img-container a').on({
  mouseenter: function() {
    jQuery('.thumbnail_player').css("display", "block");
    jQuery('.thumbnail_player').attr("autoplay", "true");
    jQuery('.thumbnail_player').attr("loop", "true");
    jQuery('.thumb_image').css("display", "none");
  },

  mouseleave: function() {
    jQuery('.thumbnail_player').css("display", "none");
    jQuery('.thumbnail_player').attr("autoplay", "false");
    jQuery('.thumbnail_player').attr("loop", "false");
    jQuery('.thumb_image').css("display", "block");
  }
});

Answer 1

jQuery('.img-container a').on({
  mouseenter: function() {
    var $element = $(this).find('.thumbnail_player');
    var $image = $(this).find('.thumb_image');
    $element
      .css("display", "block")
      .attr("autoplay", "true")
      .attr("loop", "true");
    $image.css("display", "none");
  },

  mouseleave: function() {
    var $element = $(this).find('.thumbnail_player');
    var $image = $(this).find('.thumb_image');
    $element
      .css("display", "none")
      .attr("autoplay", "false")
      .attr("loop", "false");
    $image.css("display", "block");
  }
});