Question

jQuery的新功能以及一切。对不起，如果这是显而易见的。

这是我的小提琴（忽略我可怕的布局技巧）：http://jsfiddle.net/bBd8H/3/

HTML：

<div id="effect"></div>
<div class="outer">
    <div class="imginfo"></div>
    <div class="inner">
        <div class="image"></div>
    </div>
</div>
<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
    <div class="imginfo"></div>

外部div可能会重复多次（博客文章）。

jQuery的：

$(function ($) {
    $('#effect').hide();
    $('.imginfo').hide();

    $('.inner .image').mouseenter(function () {
        $('#effect').show();
        $('.outer .imginfo').show();
    });
    $('.inner .image').mouseleave(function () {
        $('#effect').hide();
        $('.outer .imginfo').hide();
    });
});

现在发生的所有.imginfo div都会出现，而不仅仅是.outer div中的那个正在悬停的图像。

如何让它只显示相关的imginfo？

Answer 1

您需要使用this的组合来表示触发事件的对象，并.closest()和.find()在您的分支中找到.imgeinfo树。

$(function ($) {
    $('#effect').hide();
    $('.imginfo').hide();

    $('.inner .image').mouseenter(function () {
        $('#effect').show();
        $(this).closest(".outer").find("imginfo").show();
    });
    $('.inner .image').mouseleave(function () {
        $('#effect').hide();
        $('.outer .imginfo').hide();
    });
});

通过解释这一行：

$(this).closest(".outer").find("imginfo").show();

一点一点地分解：

$(this)从触发事件的对象（鼠标输入的对象）中生成一个jQuery对象

$(this).closest(".outer")升级到您分支的父级。

$(this).closest(".outer").find("imginfo")然后在你的分支中找到imginfo。

Answer 2

您需要使用上下文（this）来搜索引用.imginfo：

$('.inner .image').mouseenter(function () {
    $('#effect').show();
    $(this).closest(".outer").find(".imginfo").show();
});

mouseleave类似。

修改：使用closest代替parents，以避免在嵌套情况下出现错误行为。

jQuery：只选择元素的悬停实例？

2 个答案: