CODEWITHSUNDEEP
jqueryhovermouseenter
user3004539
user3004539

Reputation: 1

Jquery hover trggering all divs

Please forgive me but I am still a newbie to jQuery. I have a site that has some golf packages on it. What I am trying to do is when you hover over the package the price slides down under the image of the package and a view package button fades in on top of the image

I have written a bit of code that works fine when there is only one package on the page. But when there are multiple packages on the page there is an issue. When you hover on any of them all the packages are triggered

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(".FPPrice").stop(true, true).slideDown(400);
        $(".FPFade").fadeIn('slow');
    }, function () {
        $(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(".FPFade").fadeOut('slow');
    });
});

HTML markup up is

<div class="FPBox">
    <div class="FPName">Package Name</div>
    <div class="FPImage">
        <img src="" alt="Package" border="0" />
        <div class="FPFade" style="display:none">View Package</div>
    </div>
    <div class="FPPrice" style="display:none;">Price</div>
</div>

Any help would be greatly appreciated on how I can just target the div that I have hovered on instead of all of them triggering

Upvotes: 0

Views: 77

Answers (3)

LeGEC
LeGEC

Reputation: 51850

The $(".FPPrice") in the following line of code :

 $(".FPPrice").stop(true, true).slideDown(400);

will select all nodes with class FPPrice on the page.

You probably want :

// find the parent ".FPBox" starting from the current node :
var $box = $(this).closest(".FPBox");
// search only inside this box :
$box.find(".FPPrice").stop(true, true).slideDown(400);
$box.find(".FPFade").fadeIn('slow');

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

you need to find the related element

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(this).next(".FPPrice").stop(true, true).slideDown(400);
        $(this).find(".FPFade").stop(true, true).fadeIn('slow');
    }, function () {
        $(this).next(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(this).find(".FPFade").stop(true, true).fadeOut('slow');
    });
});

the FPPrice element is the next sibling, where as FPFade is a child

Demo: Fiddle

Upvotes: 1

Dieterg
Dieterg

Reputation: 16368

The problem is that you are triggering all classes. You only want to trigger the classes that are inside the .FPImage div

Try something like below:

$(document).ready(function() {
    $(".FPImage").hover(function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).slideDown(400);
      $this.find(".FPFade").fadeIn('slow');
    }, function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).delay(10).slideUp(400);
      $this.find(".FPFade").fadeOut('slow');
    });
});

Upvotes: 1

Related Questions