Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hover, mouseover and mouse out

I'm learning and using jQuery and want to display a delete icon for some elements.

I have an outer main div, which contains number of wrappers for elements. Inside the element wrapper, I want to display a delete icon when the user hovers over the element wrapper, and remove it when user moves out of the element wrapper.

Using mouseover and mouseout, I can display and remove the icon, but as soon as I move my mouse over the delete icon it is removed because it fires the mouseout event for the element wrapper. What am I doing wrong?

like image 834
KutePHP Avatar asked Dec 16 '10 17:12

KutePHP


People also ask

What is mouseover and Mouseout?

The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves. These events are special, because they have property relatedTarget . This property complements target . When a mouse leaves one element for another, one of them becomes target , and the other one – relatedTarget .

What is the difference between Mouseout and Mouseleave?

This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

What is mouseover event?

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.


2 Answers

Two options for you:

  1. CSS's :hover pseudo-class (but only if you don't have to support IE6)
  2. mouseenter and mouseleave events

CSS's :hover pseudo-class

You can make the browser do all the work if you don't need IE6 support, by using the :hover pseudo-class:

/* Don't show `child` elements inside `parent` elements...*/
parent child {
    display: none;
}

/* ...unless the `parent` element is being hovered over */
parent:hover child {
    display: block; /* or inline-block or whatever */
}

Live example

However, IE6 doesn't support the :hover pseudo-class except on a elements. IE7+ and all recent other browsers do.

mouseenter and mouseleave events

If CSS doesn't do it for you, you're looking for the mouseenter and mouseleave events, which are IE-specific but emulated by jQuery on all other browsers. jQuery even has a convenient function, hover, for hooking up handlers to both events so you can readily accomplish what you're looking to do.

$(...your parent element...).hover(
    function() {
        // Called when the mouse enters the element
    },
    function() {
        // Called when the mouse leaves the element
    }
 );

Here's a complete live example:

HTML:

<div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>

JavaScript using jQuery:

$('div').hover(
  function() {
    $(this).find('span.del').show();
  },
  function() {
    $(this).find('span.del').hide();
  }
);

The reason you had trouble with mouseover and mouseout is that they bubble, and so your mouseout handler on your parent element was seeing the bubbled mouseout from the underlying element when your mouse moved into the delete element. mouseenter and mouseleave don't bubble, and so they don't have that problem.

like image 75
T.J. Crowder Avatar answered Oct 05 '22 07:10

T.J. Crowder


have you tried using mouseenter and mouseleave events instead?

like image 22
mkoryak Avatar answered Oct 05 '22 08:10

mkoryak