Ориентация только навешенного элемента в списке элементов с помощью 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; 
} 

ЯШ:

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

Answer 2

попробовать это:

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