Jquery masters, GTFIH!

Associate
Joined
6 Jul 2003
Posts
2,075
As a learning task I'm trying to make a bit of a DOM element selector, similar to Firebug's. On mouse over of the element, I'll add a border to let the user know they're over an element. When they move away, it'll disappear.

I'm using this so far:

PHP:
$('*').mouseover(function () {
    $(this).css("border", "2px solid #ff0000")
});

$('*').mouseout(function () {
    $(this).css("border", "none")
});

(I'll move to using .hover and .addclass further down the line). Anyway, this is all well and good, except it's adding the border to the moused-over element AND all of it's parents, as I guess technically I'm mouseovering all of them. I just want the single highest element. How do I do this?
 
Give this a try.

Code:
$('*').mouseover(function(e){
    $(this).css("border", "2px solid #ff0000");
    e.stopPropagation();
});

.stopPropagation stops the event from bubbling up the DOM.
 
I think Tripnologist is on a better track... you want to handle the event only at the deepest level, rather than apply a style to everything and then override that style with parents()...
 
Back
Top Bottom