CODEWITHSUNDEEP
javascriptjquerymouseevent
Peeyush
Peeyush

Reputation: 4828

How to keep on showing the close icon when hover on it?

I have a div with id area on my page.

I want to show a close icon at right corner(it is inside the div) when user's mouse enter on this DIV. Everything is working fine but the issue is when user hover on close icon #closeicon area , it will hide the icon.

So please suggest how can i keep on showing the close icon when user hover on it.

Here is my code:

$("#area").on('mouseenter',function(e){
            e.stopPropagation();
            showCloseIcon();

    }).on('mouseleave',function(e){
       e.stopPropagation();
        var except=$("#closeicon");
        if(!except.is(e.target) && except.has(e.target).length===0){
            hideCloseIcon();     
        }
    });

EDIT

closeicon is not the child of the area DIV. I am positioning it over area div using css(absolute position) due to some reason.

Upvotes: 0

Views: 190

Answers (3)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

You can use this code : 

$('#area, #closeicon').hover(function(){
    $('#closeicon').show();
}, function(){
    $('#closeicon').hide()
})

Just bind your event on both id's.

Also, I used .hover since it shorter and do the same thing as .mouseenter() and .mouseleave(). in the same call.

Fiddle : http://jsfiddle.net/S9LQY/

Upvotes: 1

lxe
lxe

Reputation: 7609

I'm not sure if this is something you're looking for, but you can just use CSS for this:

#closeicon {
    display: none;
}

#area:hover > #closeicon {
    display: block;
}

Upvotes: 0

celwell
celwell

Reputation: 1662

$("#area") >> $("#area, #closeicon")

Upvotes: 0

Related Questions