Выбор определенного div в родительском div на основе события (hover)

Question

Итак, у меня есть родительский div с 7 дочерними div. Каждый из этих 7 divs является контейнером, который будет переключаться при наведении или щелчке. Как я могу прикрепить событие к одному из 7 разделов, чтобы отображалось только его содержимое? Прямо сейчас, если я нахожусь, отображается содержимое всех 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="none"), что не допускается и может привести к неожиданному поведению, например, что вы видите здесь.

Answer 2

вы должны использовать только один уникальный идентификатор для одного единственного элемента, используйте class="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/

Answer 3

Ну, вам нужно что-то наведите курсор мыши, чтобы заставить его работать, поэтому .none нужно будет иметь фактический размер для вас, чтобы получить немного MousePointer штуковина над ним, но что-то вроде этого, может быть:

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

FIDDLE