CODEWITHSUNDEEP
jqueryhtmlcssdom
Zander
Zander

Reputation: 1076

mouseleave on a parent

I'm facing a problem with DOM, probably, and jQuery.

I have this HTML structure:

<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>

The functionality works like this:

Entering the mouse in ".bar-column" makes ".bar-label div" hide. ".bar-info" gets the ".bar-text" HTML and becomes display: block; from display: none;. All this is working fine with the following 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);
});

Now, when mouse leave the ".bar-column", it should put the things like before. Also, this is working properly with this 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);
    }
});

"If this works, why are you posting it here?". The thing is, that when the mouse leaves the graph through one of the p paragraphs, the function of mouseleave is not happening.

It should fire up? Because it's part of ".bar-column".

Upvotes: 0

Views: 204

Answers (1)

Usman Arshad
Usman Arshad

Reputation: 868

Try using: 

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

Instead

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

Upvotes: 1

Related Questions