Question

I have a list of <divs> with the same class. Within each <li> are two <divs>. I want to hide one <div> when the user hovers over the other <div>.

The issue I am having is that when I use the following code, every <div> with the class “.div_2” is hidden when I hover over ANY <div> with the class “.div_1”.

I want it so only the <div> with the class “.div_2” is hidden when the user hovers over the with class “.div_1” in that specific <li>

I cannot change the markup or the classes, and was wondering how I can achieve this. Could I combine $(this) with “.div_2”?

<li>
<div class="div_1"></div>
<div class="div_2"></div>
</li>    
<li>
<div class="div_1"></div>
<div class="div_2"></div>
</li> 
... 

$(document).ready(function(){
    // MEDIA GALLERY HOVER //

        $(".div_1").hover(
          function () { $(".div_2").hide(); },
          function () { $(".div_2").show(); }
        );

})

Answer 1

You can use next method, which selects the next sibling of the element or siblings method.

$(".div_1").hover(
    function () { $(this).next().hide(); },
    function () { $(this).next().show(); }
);

• next()
• siblings()