CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Darko Demić
Darko Demić

Reputation: 3

Targeting only hovered element in a list of elements using jQuery

What I am trying to do is to have only selected, in this case hovered, element replaced by video. Right now all elements that share same class get replaced when one of them gets hovered.

Here is codepen.

I have read about using $(this) but I cannot figure out how to implement it here.

Any idea how to accomplish this? Thank you.

Code here as well:

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");
  }
});

Upvotes: 0

Views: 51

Answers (2)

&#193;lvaro Delgado Villalba
&#193;lvaro Delgado Villalba

Reputation: 113

try this:

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',this).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");
  }
});

Upvotes: 0

thesublimeobject
thesublimeobject

Reputation: 1403

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");
  }
});

Upvotes: 1

Related Questions