Jquery наведите все дивы

Question

Jquery наведите все дивы

0

Пожалуйста, простите меня, но я все еще новичок в jQuery. У меня есть сайт, на котором есть пакеты для гольфа. То, что я пытаюсь сделать, - это когда вы наводите курсор на пакет, цена скользит вниз под изображением пакета, а кнопка пакета просмотра исчезает поверх изображения

Я написал немного кода, который отлично работает, когда на странице есть только один пакет. Но когда на странице есть несколько пакетов, есть проблема. Когда вы наводите курсор на любой из них, все пакеты запускаются

$(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 - это

<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>

Любая помощь будет принята с благодарностью за то, как я могу настроить таргетинг на div, на который я навел курсор, а не на все триггеры

user3004539 25 фев. 2014, в 17:07

Источник

Теги:

jquery

hover

mouseenter

3 ответа

Ещё вопросы

Dieterg · Answer 1 · 2014-02-25T13-23-00.000Z

Проблема в том, что вы запускаете все классы. Вы хотите только вызвать классы, находящиеся внутри div .FPImage

Попробуйте что-нибудь вроде:

$(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');
    });
});

Arun P Johny · Answer 2 · 2014-02-25T12-43-00.000Z

вам нужно найти связанный элемент

$(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');
    });
});

элемент FPPrice является следующим родным братом, где FPFade является дочерним

Демо: скрипка

Спасибо Арун. Теперь я понимаю, что я сделал не так.

LeGEC · Answer 3 · 2014-02-25T12-55-00.000Z

$(".FPPrice") в следующей строке кода:

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

выберет все узлы с классом FPPrice на странице.

Вы, вероятно, хотите:

// 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');

ОП, похоже, это замечает и нуждается в решении.