Question

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

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

我在这里：

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

确保只显示DIV（.content）的一个实例（即：仅显示框触发器的内容悬停在上面）。
确保当.content中的文本悬停在（链接）上时，它不会关闭显示的内容并恢复其原始状态，但您可以高兴地点击该链接。
< / LI>
对于第1点我肯定“这个”是答案，但无法使其正常工作，而对于第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获取相关的.content div。

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

<强> Working Fiddle

api.jquery.com/hover/

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

2 个答案: