0

したがって、7つの子divを持つ親divがあります。これらの7つのdivはそれぞれ、ホバーまたはクリックで切り替わるコンテナです。イベントを7つのdivの1つに添付して、その内容のみを表示するにはどうすればよいですか？今、ホバーすると、すべてのdivのコンテンツが表示されます。ホバーして、ホバーしたdivの内容のみを表示する必要があります。

$('div#HoldsAll').on('hover', function(){
$('div.none').show();
});

<div id="HoldsAll">

<div class="none">
<p>A hover over this parent div should display only this</p>
<p>and this</p>
<p>and this too</p>
</div>
<div class="none">
<p>This should remain hidden</p>
</div>
<div class="none">
<p>This should remain hidden, too</p>
</div>

4

3 に答える 3

1

1つの一意の要素に対して1つの一意のIDのみを使用する必要があります。次を使用してくださいclass="none"。

クラスがnoneのdivのコンテンツが、ホバーする要素のない場所に隠されている場合は、次のことを試してください

。CSS：

.none p {display: none;}
span {color: red}

HTML：

<div id="HoldsAll">

<div class="none">
 <span>show</span>    
 <p>A hover over this parent div should display only this</p>
 <p>and this</p>
 <p>and this too</p>
 </div>

 <div class="none">
 <span>show</span>    
 <p>This should remain hidden</p>
 </div>

 <div class="none">
 <span>show</span>    
 <p>This should remain hidden, too</p>
 </div>

</div>

jQuery：

 $(function () {            
   $('.none').hover(function () {
      $(this).find("p").show();
   }, function () {
      $(this).find("p").hide();
   });
});

http://jsfiddle.net/faNtu/

于 2012-04-22T21:20:38.680 に答える
0

ID（）が重複していますがid="none"、これは許可されておらず、ここに表示されているような予期しない動作を引き起こす可能性があります。

于 2012-04-22T21:18:01.527 に答える
0

まあ、それを機能させるにはホバーするものが必要なので.none、小さなマウスポインターをその上に置くには実際のサイズが必要ですが、次のようなものかもしれません:

$('.none', '#HoldsAll').on({
    mouseenter: function() {
        $('p', this).show();
    },
    mouseleave: function() {
        $('p', this).hide();    
    }
});​

フィドル

于 2012-04-22T23:53:16.990 に答える