javascript - 选择当前元素 jquery - 多个div

Question

我是 jquery 新手，我试图了解如何在我的情况下悬停当前元素:

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

我知道我已经接近我想要完成的目标了，这是代码:

$(".feat_pic").hover(function(){
        $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith");
        $(".home-featured ul li a.home-feat-title").addClass("satan");
    }, function(){
        $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").removeClass("lilith");
        $(".home-featured ul li a.home-feat-title").removeClass("satan");
    });

如何使 add.Class 仅适用于当前的 .feat_pic？

Answer 1

您可以在事件处理程序中使用 this 来引用悬停的 feat_pic 元素，然后您可以使用 .find()找到其中的 .layer 和 .home-feat-title 元素，例如

$(".feat_pic").hover(function () {
    $(this).find(".feat_bg_img .layer").addClass("lilith");
    $(this).find("a.home-feat-title").addClass("satan");
}, function () {
    $(this).find(".feat_bg_img .layer").removeClass("lilith");
    $(this).find("a.home-feat-title").removeClass("satan");
});

演示:Fiddle