CODEWITHSUNDEEP
javascriptjqueryhtmlcss
r3plica
r3plica

Reputation: 13367

stopPropagation does not appear to work as expected

I have some html which looks like this (simplified)

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

and my css looks like this:

.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; }

then I have some jquery which does this:

$("#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");
});

Basically what I want to happen, is that when I hover over the image the .glyphicon is displayed and when I leave the image the .glyphicon is hidden. The problem is when I hover over .glyphicon the .glyphicon is hidden, so I put a delay on the removeClass so that when I hover over .glyphicon it stays until I move off it. But this doesn't work as expected. Instead it flashes off then back on.

Is there any way that I can get the hover class to stay on the div while I am over .glyphicon or the image and only be hidden when I have moved away from the .glyphicon and the image?

I hope that makes sense?

Upvotes: 1

Views: 98

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You just need to include .glyphicon in the selector for the first mouseenter event...

$("#assets").on("mouseenter", "img, .glyphicon", function () {
    $(this).parent().addClass("hover");
}).on("mouseout", "img, .glyphicon", function () {
    $(this).parent().removeClass("hover");
});

and remove the second event handler.

Here's a working jsfiddle example...

http://jsfiddle.net/3gA5k/1/

Upvotes: 3

Related Questions