親のdiv内の特定のdivをイベント（ホバー）に基づいて選択する

Question

したがって、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> 

Answer 1

あなたは、そのようなあなたがここで見ているものとして許可されておらず、予期しない動作につながる可能性があり、重複のID（id="none"）を、持っています。

Answer 2

あなたはclass="none"を使用し、1つのユニークな要素の一つだけのユニークなIDを使用する必要があります。

なしのクラスを持つ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/

Answer 3

さて、あなたはとても.noneは、多分あなたはそれ以上のあなたの小さなマウスポインターのブツを取得するために実際のサイズを持っている必要がありますが、このようなものだろう、それを動作させるために上にマウスを移動するために何かを必要とします：

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

FIDDLE