Jquery Hover Problem

Question

I have one item that has a hover method attached to it, and when you hover it displays another div on top of it... unfortunately once the upper div displays it redoes the actions (since i added the same class for it to actually stick around)

$(document).ready(function(){

    $(".cartHover").hover(
      function () {
        $("#uniquename4").fadeIn();
      }, 
      function () {
        $("#uniquename4").fadeOut();
      }
    );
  });

And so i have a <div class="cartHover"> that on hover displays <div id="uniquename4" class="cartHover"> but it does the fadeIn twice. Help please!

Answer 1

So wouldn't it be better to have:

CSS

<div id="someID" class="cartHover">
  <div id="someId" class="showMe">
  </div>
</div>

<div id="someID" class="cartHover">
  <div id="someId" class="showMe">
  </div>
</div>

jQuery

$(function(){
  $('.cartHover').mouseenter(function(){
    $(this).find('.showMe').show();
  }).mouseleave(function(){
    $(this).find('.showMe').hide();
  });
});

Answer 2

If you don't want the animation cue to stack up on you, you'll need to include a .stop() in there as well:

$(function(){
  $('.cartHover').mouseenter(function(){
    $(this).find('.showMe').stop().show();
  }).mouseleave(function(){
    $(this).find('.showMe').stop().hide();
  });
});

Answer 3

Simple answer. Look at what you're doing here. You've got two divs with the class, cartHover. So, hovering the first div, causes #uniquename4 to display. Once uniquename4 is displayed, if you hover it, it ts going to fade itself in again. It all has to do with your selector, you're binding the hover event to all instances of elements with the class cartHover -- this selection includes both the div which is by default visible, and #uniquename4 which is shown on hover. I would suggest something like:

<div id="showSomething" class="cart-class">Content</div>
<div id="toBeShown" class="cart-class">Content</div>

$(document).ready(function() {
    $('#showSomething').hover(
         function() {
            $('#toBeShown').fadeIn();
         },
         function() {
             $('#toBeShown').fadeOut();
         }
     );
});