jQuery fadeToggle+；鼠标移出组合，防止切换内容触发事件

我正在努力做到这一点：

显示一个显示全宽和全高图像的框，其中还包含触发器。当鼠标悬停在触发器上方时，一个DIV将展开以覆盖该框，然后显示一些内容，包括可单击的链接。 将光标移到图像框外时，DIV封面将消失，框将返回其原始状态

我就在这里：

我在寻找两件事的指针：

确保只显示DIV（.content）的一个实例（即：仅显示悬停在其上的框触发器的内容）

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

对于第1点，我确信“这”是答案，但无法让它起作用，对于第2点，我想知道为什么悬停文本时会触发

非常确定所有工作都需要在此jQuery块中完成：

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

---

非常感谢任何提示。

无需使用

mouseout

处理程序；

hover

函数将通过第二次回调为您处理此问题。您可以使用

next

获取相关的

.content

div

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

---

您可以尝试如下设置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>

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

---

对于第1点，请尝试

$（this）.sides（'.content'）.fadeToggle（）使用
$（'.content'）
选择器选择该类的所有元素。使用
.sibbins（）
确保只抓取该类属于同一父元素的元素。非常好，非常感谢您的解释和代码，更新了FiddleThank，这是对我的代码的一个很好的改进，但是我仍然有第2点的问题-因为我需要可以单击所附的链接，而不是当场触发分区关闭！非常感谢，这是一个巨大的帮助。