ansaurus

Question

Move active element loses mouseout event in internet explorer

Answer 1

A:

That's wonky, and seems to be IE-only (but so is VML). If the parent element has a height specified, you can attach the mouseout handler to the parent... but it sounds like that won't work in your situation. Your best alternative is to use mouseover on adjacent elements to hide it:

$(function()
{
    $("li").mouseover(function()
    {
        $("li").css("border-color", "black");
        $(this).css("border-color", "red");
        this.parentNode.appendChild(this);
    });
});

Or SVG. You can use z-index in SVG.

gilly3 2010-09-11 00:53:14

Hmm the alternative is I think the solution here. Basically I'll need to call a reset function on all the other elements on mouseover which will fire the shrink animation. Its very clunky but it might work. I'll up vote this answer for now, and see if anyone else can think of something.

johnwards 2010-09-11 10:57:01

Answer 2

+1 A:

I was able to get it working with nested divs and a mouseenter event on the parent:

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

Here's a working version using Raphael:

http://jsfiddle.net/xDREx/

webXL 2010-10-20 19:06:12

Can' get that to work at all. Nothing happens when I mouse over the boxes.

johnwards 2010-10-21 07:33:01

webXL 2010-10-21 17:18:13

Ooh mouseenter on the parent, that is basically what you are doing. Which fires the reset. Nice. However it doesn't solve the core problem of the events being lost. (Click event too!) Deffo worth half the 200 points though. If I could get the element to get to the top with out losing events i'd be a happy man. (JSFiddle must have been down, working great now)

johnwards 2010-10-22 19:05:47

Answer 3

+2 A:

The problem is that IE handles mouseover differently, because it behaves like mouseenter and mousemove combined on an element. In other browsers it's just mouseenter.

So even after your mouse has entered the target element and you've changed it's look and reappended it to it's parent mouseover will still fire for every movement of the mouse, the element gets reappended again, which prevents other event handlers from being called.

The solution is to emulate the correct mouseover behavior so that actions in onmouseover are executed only once.

$("li").mouseover( function() {
    // make sure these actions are executed only once
    if ( this.style.borderColor != "red" ) {
        this.style.borderColor = "red";
        this.parentNode.appendChild(this);
    }
});

Examples

Extented demo of yours
Example demonstrating the mouseover difference between browsers (bonus: native javascript)

galambalazs 2010-10-23 22:14:44

Brilliant, exactly what I was hoping for when I set the bounty up. My code is performing much better now I'm not having to hack around this too.

johnwards 2010-10-25 07:43:41

I'm gald I could help :)

galambalazs 2010-10-25 08:18:27

ansaurus

tags:

views:

answers:

Move active element loses mouseout event in internet explorer

related questions