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

Question

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

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

这就是我所在的位置：

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

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

1. 确保仅显示 DIV (.content) 的一个实例（即：仅显示悬停的框触发器的内容）。

2. 确保当 .content 中的文本悬停在（链接）上时，它不会关闭显示的内容并恢复到原始状态，但您可以愉快地单击链接。

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

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

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

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

Answer 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();
});

Answer 2

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

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

工作小提琴

api.jquery.com/hover/