Jquery masters, GTFIH!

Paramount · 25 Jan 2011 at 22:27

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?

Dracata · 26 Jan 2011 at 00:13

I couldn't be farther from a Jquery master, but it looks like the .parent() or .closest() parameters might be what you're looking for?

http://api.jquery.com/parent/
http://api.jquery.com/closest/

Tripnologist · 26 Jan 2011 at 09:15

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.

Paramount · 26 Jan 2011 at 21:03

Just a quick update, parents() was the one I was looking for. parents().css('border', 'none');

Ty for the pointer!

AJK · 26 Jan 2011 at 21:06

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()...