Thursday, June 4, 2009

[jQuery] hover + inside elements

Hi,

I have a layout with 4 collumn divs. When the mouse hovers over each
collumn, a simple fadein is performed on another element.
Now what happens is, when i move over another element INSIDE a collumn
div (a <h2> for instance), the same fadein runs again... Am I doing
something wrong with the selectors ?

Here's a piece of code:

$(document).ready(function() {

var sectionSpeed = 250;

$("#section-c").hover(
function() {
$("#icon-c").fadeIn(sectionSpeed);
},
function() {
$("#icon-c").fadeOut(sectionSpeed);
}
);

});

html structure looks like this:

<div id="section-y"><h2>main log</h2></div>
<div id="section-k"><h2>mobileme log</h2></div>
<div id="section-m"><h2>flickr log</h2></div>
<div id="section-c"><h2>twitter log</h2></div>

<div id="icon">
<div id="icon-c"></div>
<div id="icon-m"></div>
<div id="icon-y"></div>
<div id="icon-k"></div>
</div>


Thank yous.

No comments: