javascript - stopPropagation 似乎没有按预期工作

Question

我有一些 html 看起来像这样(简化)

<div class="ajax asset-container" id="assets">
    <div class="asset-row">
        <div style="width: 160.71428571428575px;" class="">
            <img style="margin-left: -32.14285714285714px;" src="http://d49aa22b-3476-4fac-8bef-38f53f9378f3.s3.amazonaws.com/2013-10-18 13.44.21_thumb.png">
            <span class="glyphicon glyphicon-ok"></span>
        </div>    
    </div>   
</div>

我的 CSS 看起来像这样:

.asset-container                                                   { overflow: auto; }
.asset-container > div.asset-row,
.asset-container > div.asset-row > div                             { margin: 5px 5px 0px 5px; overflow: hidden; }
.asset-container > div.asset-row > div                             { float: left; position: relative; }
.asset-container > div.asset-row > div > span.glyphicon            { position: absolute; top: 0; width: 100%; color: white; text-align: center; padding: 5px; background-color: rgba(26,171,186,.5); display: none; }
.asset-container > div.asset-row > div.hover > span.glyphicon      { display: block; }

然后我有一些执行此操作的 jquery:

$("#assets").on("mouseenter", "img", function () {
    $(this).parent().addClass("hover");
}).on("mouseout", "img", function () {
    $(this).parent().delay(100).removeClass("hover");
});

$("#assets").on("mouseenter", ".glyphicon", function (e) {
    e.stopPropagation();

    $(this).parent().parent().addClass("hover");
});

基本上我想要发生的是，当我将鼠标悬停在图像上时，.glyphicon 会显示，而当我离开图像时，.glyphicon 会隐藏。问题是当我将鼠标悬停在 .glyphicon 上时，.glyphicon 被隐藏，所以我延迟了 removeClass 以便当我将鼠标悬停在.glyphicon 它会一直保持到我离开它为止。但这并不像预期的那样工作。相反，它会闪烁然后重新打开。

有什么方法可以让 hover 类在我结束 .glyphicon 或图像时留在 div 上仅当我离开 .glyphicon 和图像时才隐藏？

我希望这是有道理的？

Answer 1

您只需要在第一个 mouseenter 事件的选择器中包含 .glyphicon...

$("#assets").on("mouseenter", "img, .glyphicon", function () {
    $(this).parent().addClass("hover");
}).on("mouseout", "img, .glyphicon", function () {
    $(this).parent().removeClass("hover");
});

并删除第二个事件处理程序。

这是一个有效的 jsfiddle 示例...

http://jsfiddle.net/3gA5k/1/