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课程在我div .glyphicon或.glyphicon时留在{{1}}，或者只有当我离开{{1}}和图片？

我希望这有道理吗？

Answer 1

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

$("#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/

stopPropagation似乎没有按预期工作

1 个答案: