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>

功能如下：

在＆＃34; .bar-column＆＃34;中输入鼠标制作＆＃34; .bar-label div＆＃34;隐藏。＆＃34; .bar的-信息＆＃34;得到＆＃34; .bar-text＆＃34; HTML并从display: block;变为display: none;。所有这些都适用于以下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);
});

现在，当鼠标离开＆＃34; .bar-column＆＃34;时，它应该放置之前的东西。此外，这适用于这个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);
    }
});

＆＃34;如果这样有效，为什么要在这里发布？＆＃34;。问题是，当鼠标通过其中一个p段落离开图形时，鼠标移动的功能就不会发生。

应该开火吗？因为它是＆＃34; .bar-column＆＃34;。

的一部分

Answer 1

尝试使用：

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

相反

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

父亲

1 个答案: