Question

I have an <input type="range"> scroll and a div that on mouseover and mouseleave changes its background. You can see the working code here: http://jsfiddle.net/y8S57/ , please use a Webkit browser as type="range" works only on Webkit.

The problem is that if the mouse is down on the type="range" button and enters the mouseover and mouseleave zone the respective events are not triggered. Somehow using the type="range" cancels the other events that should be happening.

How can I fix this so when I drag the <input type="range"> and my mouse is over that mouseover div the mouseover event to trigger?

HTML:

<input id="zoom" type="range" name="zoom" min="10" max="100" step="1" value="40" >
<div id="zone"></div>

JavaScript:

$("#zone").mouseenter(function(){
   $(this).css({background:"red"});
});

$("#zone").mouseleave(function(){
   $(this).css({background:"black"});
});

Answer 1

Unfortunately it looks like WebKit just isn’t firing mouse events on other elements here. All I can offer you is how to shorten your code down:

$("#zone").hover(function(){
   $(this).css({background:"red"});
}, function(){
   $(this).css({background:"black"});
});

This isn’t a bug you can fix (and may certainly be intentional behavior by the browser), posting it on the WebKit Bugzilla will do the most good here. By intentional I mean they probably actively do this for other reasons, for example when you go crazy dragging you wouldn’t want to trigger a flyout menu that covers the slider all the sudden.