如何僅使用jquery定位當前懸停的div，當有許多其他div使用相同的類時？

Question

如何僅使用jQuery hover（）函數定位當前div（即我懸停在）而不是所有使用相同類的div？

我的代碼是這樣的（我有我的網站上許多div.video-item元素（它可以爲每一頁不同）：

<div classs="video-item list"> 
    <a class="video-item-link" href="<?php echo esc_url(home_url('/')); ?>signup"> 
     <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/001.jpg'; ?>"> 
     <div class="mouseover-element"><!-- --></div> 
    </a> 
</div> 

<div classs="video-item list"> 
    <a class="video-item-link" href="<?php echo esc_url(home_url('/')); ?>signup"> 
     <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/002.jpg'; ?>"> 
     <div class="mouseover-element"><!-- --></div> 
    </a> 
</div> 

<div classs="video-item list"> 
    <a class="video-item-link" href="<?php echo esc_url(home_url('/')); ?>signup"> 
     <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/003.jpg'; ?>"> 
     <div class="mouseover-element"><!-- --></div> 
    </a> 
</div> 

的JS是：

<script> 
    $('a.video-item-link').hover(

     function() { 
     // in 
     $('a.video-item-link div.mouseover-element').show(); 

     }, function() { 
     // out 
     $('a.video-item-link div.mouseover-element').hide(); 
     } 
    ); 
</script> 

的樣式div.mouseover-element是display：none;默認CSS

我該如何定位目前只有鼠標移過來的當前div？現在當我將鼠標懸停在任何顯示全部25個div.mouseover。如何限制只有h我目前懸停的div？

Answer 1

使用this，這是事件的目標，用jQuery遍歷功能一起：

從您的標記

$('a.video-item-link').hover(function() { 
    // in 
    $(this).find('div.mouseover').show(); 
    }, function() { 
    // out 
    $(this).find('div.mouseover').hide(); 
    } 
); 

雖然，它看起來像你需要$(this).find('div.mouseover-element')