我可能遇到了 DOM 和 jQuery 的问题。
我有这个 HTML 结构:
<div class="bar-column">
<div class="bar-label">
<img src="img/new-icons/icon-education.png">
<div style="font-size: 18px; display: none;">140,86</div>
</div>
<div class="bar-container" style="height: 146px;">
<div class="bar-graph clickable education-chart" style="height: 52.27880047505939%; left: 0%; width: 100%" data-width="11.11111111111111" data-balloon="show" data-left="22.22222222222222" data-category="education">
<div class="bar-text">
<p class="bar-text">Education</p>
<p class="bar-price">140,86</p>
<p class="bar-percent">15,17%</p>
<p class="bar-movements">1 movement</p>
</div>
</div>
</div>
<div class="bar-info visible" style="display: block;">
<p class="bar-text">Educación</p>
<p class="bar-price">140,86</p>
<p class="bar-percent">15,17%</p>
<p class="bar-movements">1 movimiento</p>
</div>
</div>
功能是这样的:
在“.bar-column”中输入鼠标会使“.bar-label div”隐藏。 “.bar-info”获取“.bar-text”HTML 并从 display: none;
变为 display: block;
。所有这一切都适用于以下 jQuery:
$(".bar-column").mousemove(function() {
//Label
$(this).find(".bar-label div").hide();
$(this).find(".bar-label img").css("z-index", 102);
//Show info
var text = $(this).find(".bar-text").html();
$(this).find(".bar-info").show().html(text);
$(this).css("z-index", 101);
});
现在,当鼠标离开“.bar-column”时,它应该像以前一样放置东西。此外,这与此 jQuery 一起正常工作:
$(".bar-column").mouseleave(function() {
//Check if it's not clicked
//Class visible is given when you click the graph
if( !$(this).find(".bar-info").hasClass("visible") ) {
//Hide info
$(this).find(".bar-info").hide();
//Show label text
$(this).find(".bar-label div").show();
$(this).find(".bar-label img").css("z-index", 1);
}
});
“如果这有效,你为什么要把它张贴在这里?”。问题是,当鼠标通过 p
段落之一离开图形时,mouseleave 函数不会发生。
它应该启动?因为它是“.bar-column”的一部分。
最佳答案
尝试使用:
$(".bar-column").mouseenter(function() {
// Code
});
代替
$(".bar-column").mousemove(function() {});
关于jquery - mouseleave 在 parent 身上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30458184/