jQuery fadeToggle + mouseout 组合，防止切换内容触发事件答案

【问题标题】：jQuery fadeToggle + mouseout combination, prevent toggled content triggering an eventjQuery fadeToggle + mouseout 组合，防止切换内容触发事件
【发布时间】：2013-06-15 01:16:29
【问题描述】：

我正在努力实现这一目标：

显示一个显示全宽和全高图像的框，还包含一个触发器。将鼠标悬停在触发器上时，DIV 将展开以覆盖该框，然后显示一些内容，包括可点击的链接。将光标移出图像框时，DIV封面消失，框恢复原状。

我在这里：

http://jsfiddle.net/wfXYy/1/

我正在寻找两件事的指针：

确保只显示一个 DIV (.content) 实例（即：仅显示悬停的框触发器的内容）。
确保当 .content 中的文本悬停在（链接）上时，它不会关闭显示的内容并恢复到原始状态，但您可以愉快地单击链接。

对于第 1 点，我确定“this”是答案，但无法使其正常工作，对于第 2 点，我想知道为什么当悬停文本时，触发器会被触发。

很确定所有工作都需要在这个 jQuery 块中完成：

$('.corner').hover(function() {
    $(this).addClass("corner-full").mouseout(function() {
        $(".corner").removeClass("corner-full");     
    });
    $('.content').fadeToggle();
});

非常感谢任何提示，谢谢。

【问题讨论】：

对于第 1 点，尝试 $(this).siblings('.content').fadeToggle(); 使用 $('.content') 选择器选择具有该类的所有元素。使用.siblings() 确保只抓取属于同一父元素的该类的元素。
完美，非常感谢您的解释和代码，更新了小提琴

标签： jquery toggle mouseout

【解决方案1】：

您可以尝试像这样设置您的 HTML：

<div class="wrap">
    <div class="image-cover"> 
        <div class="corner">
            <div class="content">
                <h1>Title</h1>
                <a href="#">Link</a>
            </div>
        </div>
        <img src="http://dummyimage.com/300x300/ccc/ccc" />
    </div>
</div>

还有这样的jquery：

$('.corner').hover(function() {
    $(this).addClass("corner-full");
    $(".content", this).fadeToggle();
}, function() {
    $(this).removeClass("corner-full");
    $(".content", this).fadeToggle();
});

【讨论】：

看准了！非常感谢，这是一个巨大的帮助。

【解决方案2】：

无需使用mouseout 处理程序； hover 函数将通过第二次回调为您处理这些问题。您可以使用next 获取相关的.content div。

$('.corner').hover(function() {
    $(this).addClass("corner-full").next().fadeToggle();
}, function() {
    $(this).removeClass("corner-full").next().fadeToggle();
});

Working Fiddle

api.jquery.com/hover/

【讨论】：

谢谢，这是对我的代码的一个很好的改进，但我仍然对第 2 点有疑问 - 因为我需要封闭的链接是可点击的，而不是触发 DIV 的关闭。