針對只使用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"); 
    } 
}); 

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