CODEWITHSUNDEEP
jqueryjquery-selectors
navarro
navarro

Reputation: 37

Selecting a specific div within a parent div based on event (hover)

So, I have a parent div, with 7 child divs. Each one of those 7 divs is a container that will be toggled on a hover or a click. How can I attach the event to one of the 7 divs so that only its contents display? Right now if I hover, the content of all divs is displayed. I need to hover and only display the contents of the hovered 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>

Upvotes: 0

Views: 1655

Answers (3)

adeneo
adeneo

Reputation: 318182

Well, you need something to hover over to make it work, so .none will need to have an actual size for you to get your little mousepointer thingy over it, but something like this maybe:

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

FIDDLE

Upvotes: 0

Ram
Ram

Reputation: 144689

you should use only one unique id for one unique element, use class="none":

if the content of div with class of none is hidden there in no element to hover on, try this:

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/

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

You have duplicate IDs (id="none"), which is not allowed and may lead to unexpected behaviour, such as what you are seeing here.

Upvotes: 0

Related Questions