[jQuery] hover + inside elements

[Thomas]

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.