1

<divs>我有一个同班的名单。每个里面<li>有两个<divs>。<div>当用户将鼠标悬停在另一个上时，我想隐藏一个<div>。

我遇到的问题是，当我使用以下代码时，<div>当我将鼠标悬停在<div>带有“.div_1”类的任何位置上时，每个带有“.div_2”类的代码都会被隐藏。

我想要它，所以<div>当用户将鼠标悬停在特定的“.div_1”类上时，只有“.div_2”类被隐藏<li>

我无法更改标记或类，并且想知道如何实现这一点。我可以$(this)与“.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(); }
        );

})
4

4 回答 4

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

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

})

或者让你的代码更短 - DEMO

$(document).ready(function(){
    $(".div_1").on("mouseover mouseout", function() {
        $(this).siblings(".div_2").toggle();
    });
});
于 2012-09-27T16:45:47.870 回答
0

您可以使用方法，它选择元素或方法next的下一个兄弟。siblings

$(".div_1").hover(
    function () { $(this).next().hide(); },
    function () { $(this).next().show(); }
);
于 2012-09-27T16:45:47.433 回答
0 
$('.div1').on('mouseover',function() { $(this).siblings('.div2').css('display','none'); });
于 2012-09-27T16:46:13.053 回答
0 
    $(".div_1").hover(
      function () { $(this).siblings(".div_2").hide(); },
      function () { $(this).siblings(".div_2").show(); }
    );
于 2012-09-27T16:46:47.950 回答