Skip to main content

Bug Tracker

Side navigation

#1970 closed bug (fixed)

Opened November 26, 2007 02:44PM UTC

Closed November 27, 2007 07:23PM UTC

hover in Opera disables changes in cursor icon

Reported by: nene Owned by: davidserduke
Priority: minor Milestone: 1.2.2
Component: core Version: 1.2.1
Keywords: Cc:
Blocked by: Blocking:
Description

When using any hover effect, even an empty one like this:

$(function(){
    $("li").hover( function () {/* nothing */}, function () {/* nothing */} );
});

On HTML like this:

<ul>
<li><a href="#">Hello</a> world!</li>
<li><a href="#">Hello</a> world!</li>
<li><a href="#">Hello</a> world!</li>
</ul>

then, when hovering cursor from non-link content to link, the cursor does not change shape. It should change from simple arrow to pointing hand, but does not.

This happens only in Opera (tried both Windows and Linux versions).

Simple solution: hover() should return true instead of false when moused over a sub-element.

Example fix:

jQuery.fn.extend({
	hover: function(f,g) {
		// A private function for handling mouse 'hovering'
		function handleHover(e) {
			// Check if mouse(over|out) are still within the same parent element
			var p = e.relatedTarget;
			// Traverse up the tree
			while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; };
			// If we actually just moused on to a sub-element, ignore it
			if ( p == this ) return true; // this was previously FALSE
			// Execute the right function
			return (e.type == "mouseover" ? f : g).apply(this, [e]);
		}
		// Bind the function to the two event listeners
		return this.mouseover(handleHover).mouseout(handleHover);
	}
});
Attachments (0)
Change History (3)

Changed November 26, 2007 02:46PM UTC by nene comment:1

Damn... I just tried out the formatting options and mistakenly hit the submit button. The last code should look like this:

jQuery.fn.extend({
	hover: function(f,g) {
		
		// A private function for handling mouse 'hovering'
		function handleHover(e) {
			// Check if mouse(over|out) are still within the same parent element
			var p = e.relatedTarget;
	
			// Traverse up the tree
			while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; };
			
			// If we actually just moused on to a sub-element, ignore it
			if ( p == this ) return true; // this was previously FALSE
			
			// Execute the right function
			return (e.type == "mouseover" ? f : g).apply(this, [e]);
		}
		
		// Bind the function to the two event listeners
		return this.mouseover(handleHover).mouseout(handleHover);
	}
});

Changed November 27, 2007 04:36PM UTC by davidserduke comment:2

description: When using any hover effect, even an empty one like this: \ {{{ \ $(function(){ \ $("li").hover( function () {/* nothing */}, function () {/* nothing */} ); \ }); \ }}} \ \ On HTML like this: \ \ {{{ \ <ul> \ <li><a href="#">Hello</a> world!</li> \ <li><a href="#">Hello</a> world!</li> \ <li><a href="#">Hello</a> world!</li> \ </ul> \ }}} \ \ then, when hovering cursor from non-link content to link, the cursor does not change shape. It should change from simple arrow to pointing hand, but does not. \ \ This happens only in Opera (tried both Windows and Linux versions). \ \ Simple solution: hover() should return true instead of false when moused over a sub-element. \ \ Example fix: \ {{{ \ #!JavaScript \ jQuery.fn.extend({ \ hover: function(f,g) { \ \ // A private function for handling mouse 'hovering' \ function handleHover(e) { \ // Check if mouse(over|out) are still within the same parent element \ var p = e.relatedTarget; \ \ // Traverse up the tree \ while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; }; \ \ // If we actually just moused on to a sub-element, ignore it \ if ( p == this ) return true; // this was previously FALSE \ \ // Execute the right function \ return (e.type == "mouseover" ? f : g).apply(this, [e]); \ } \ \ // Bind the function to the two event listeners \ return this.mouseover(handleHover).mouseout(handleHover); \ } \ }); \ }}}When using any hover effect, even an empty one like this: \ {{{ \ $(function(){ \ $("li").hover( function () {/* nothing */}, function () {/* nothing */} ); \ }); \ }}} \ \ On HTML like this: \ \ {{{ \ <ul> \ <li><a href="#">Hello</a> world!</li> \ <li><a href="#">Hello</a> world!</li> \ <li><a href="#">Hello</a> world!</li> \ </ul> \ }}} \ \ then, when hovering cursor from non-link content to link, the cursor does not change shape. It should change from simple arrow to pointing hand, but does not. \ \ This happens only in Opera (tried both Windows and Linux versions). \ \ Simple solution: hover() should return true instead of false when moused over a sub-element. \ \ Example fix: \ {{{ \ jQuery.fn.extend({ \ hover: function(f,g) { \ // A private function for handling mouse 'hovering' \ function handleHover(e) { \ // Check if mouse(over|out) are still within the same parent element \ var p = e.relatedTarget; \ // Traverse up the tree \ while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; }; \ // If we actually just moused on to a sub-element, ignore it \ if ( p == this ) return true; // this was previously FALSE \ // Execute the right function \ return (e.type == "mouseover" ? f : g).apply(this, [e]); \ } \ // Bind the function to the two event listeners \ return this.mouseover(handleHover).mouseout(handleHover); \ } \ }); \ }}}
owner: → davidserduke
status: newassigned

You fix looks good in my limited tests. I'm trying to think about any other possible consequences.

Changed November 27, 2007 07:23PM UTC by davidserduke comment:3

resolution: → fixed
status: assignedclosed

Fixed in [3951].