使用 jQuery 定位 (this) 未按预期工作

Question

我正在尝试一些 jQuery 但有些部分我不明白。我也很难 google 因为我不太确定术语 - 因此我问这个问题并会解释我的确切意图。

这是我的 HTML 标记。

<div class="contentLarge">

<a href=""><header>Use responsive design.</header></a>

<div class="contentFlex">
    <div class="contentFlex1"></div>
    <div class="contentFlex2"></div>
</div>

现在我想要的是当我将鼠标悬停在锚点link上时，整个contentLarge容器的背景发生变化。我的页面上有几个这样的容器。

这里是 jQuery:

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $(".contentLarge").css({"background-color": "red"})
    });
});

现在我明白了，当我悬停时 - 每个 contentLarge 容器的背景都会变成红色。这不是我想要的。

但是，当我尝试使用 $(this) 选择器在此函数中进行定位时，更改的是 HEADER，而不是 contentLarge。像这样;

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $("this").css({"background-color": "red"})
    });
});

我该如何编写才能使 $(this) 成为目标容器 - 仅将其背景更改为红色而不是所有容器，或仅更改 header.

Answer 1

使用 parent() 指向 .contentLarge 容器，其中包含您悬停的 link：

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $(this).parent().css({"background-color": "red"})
    });
});

另一种选择是使用 closest()，它会搜索与 .contentLarge class 最接近的实例。当您的 .header 和 .contentClass.

之间有多层时，可用于防止使用 .parent().parent().parent()...

$(document).ready(function(){
    $(".header").mouseenter(function(){
        $(this).closest('.contentLarge').css({"background-color": "red"})
    });
});

使用 jQuery 定位 (this) 未按预期工作

Using jQuery to target (this) not working as expected

html

css

jquery

hover