1

<divs>同じクラスのリストがあります。それぞれの中<li>には2つあり<divs>ます。<div>ユーザーがもう一方にカーソルを合わせたときに一方を非表示にします<div>。

私が抱えている問題は、次のコードを使用する<div>と、クラス「.div_1」のいずれかにカーソルを合わせると、クラス「.div_2」のすべてが非表示になること<div>です。

<div>ユーザーがその特定のクラス「.div_1」にカーソルを合わせると、クラス「.div_2」のwithのみが非表示になるようにします。<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 に答える