我有一些 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
和图像时才隐藏?
我希望这是有道理的?
最佳答案
您只需要在第一个 mouseenter
事件的选择器中包含 .glyphicon
...
$("#assets").on("mouseenter", "img, .glyphicon", function () {
$(this).parent().addClass("hover");
}).on("mouseout", "img, .glyphicon", function () {
$(this).parent().removeClass("hover");
});
并删除第二个事件处理程序。
这是一个有效的 jsfiddle 示例...
关于javascript - stopPropagation 似乎没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21730856/