jquery - mouseleave 在 parent 身上

Question

我可能遇到了 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”的一部分。

Answer 1

尝试使用:

$(".bar-column").mouseenter(function() {
  // Code
});

代替

$(".bar-column").mousemove(function() {});