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

Answer 2

$(".feat_pic").hover(function(){
    var me = $(this); // current .feat_pic
    me.addClass('className');
    $(".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");
});

Answer 3

您可以使用“this”而不是在您的情况下指定类名

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

选择当前元素jquery - 多个div

3 个答案: