This one worked for me...
$('body').bind('mouseover', function(event) {
$(event.target).addClass('selected');
}).bind('mouseout', function(event) {
$(event.target).removeClass('selected');
});
You'll run into problems if you have properties assigned to more
specific selectors in your stylesheet, but otherwise, it should work
fine.
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Sep 17, 2008, at 9:50 AM, benjam wrote:
This is insanely kludgy, not very pretty, and probably slower than a
more elegant solution.
But it works.
$('*').hover(
function(event) {
var $this = $(this);
$this.addClass('selected');
$this.parents( ).removeClass('selected');
},
function(event) {
var $this = $(this);
$this.removeClass('selected');
$this.parents( ).removeClass('selected');
$this.parent( ).addClass('selected');
$this.children( ).removeClass('selected');
}
);
I'm sure there are better solutions out there, but this was the
fastest and easiest method.
On Sep 17, 2:04 am, Balazs Endresz <[EMAIL PROTECTED]> wrote:
I'm not sure I get it, but if you want to grab the <strong> inside a
<p> when the event is only bound to <p> then you can get it simply by
event.target:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *')
.hover(function(event){
var t=event.target //this will be the strong tag inside the <p>
if ($(this).children().length() > 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
You can also try this with event delegation, which will be much
faster
with a lot of
elements:http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/http://lab.distilldesign.com/event-delegation/
On Sep 16, 7:17 pm, John Boxall <[EMAIL PROTECTED]> wrote:
Hi Balazs,
Thanks for the reply - looking at your suggestion, my idea was to
apply it to the code like this:
$(function() {
$("*").hover(
function(){
// If the element has more than one child stop
propagating.
if ($(this).children().length() > 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
This is _close_ to what I want, but what I'd really like is to grab
DOM element you are hovering over with the minimum number of
children
- not necessarily zero.
It's my understanding that with the above, if you hovered over a <p>
with a <strong> inside you couldn't select the <p> because it would
have a child!
Thanks,
John
Should only return true if the selected $(this) has no children.
This is _close_ to what I want - but what I'd really like is to grab
the element
On Sep 14, 4:10 am, Balazs Endresz <[EMAIL PROTECTED]> wrote:
Hey John,
I think this will do that:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *') //without this, if a paragraph contains tags
thehoverwon't be applied to the most of the text
On Sep 12, 9:29 pm, John Boxall <[EMAIL PROTECTED]> wrote:
Heyo jQuery hackers,
I'm putting together a little script that adds a class
"selected" to
an element when youhoverover it.
When you stop hovering the class "selected" class is removed.
I would like the class only to be apply to the lowest element in
the
DOM.
For example say I was hovering over a <p> deep inside a document
- I
would like to only add the class "selected" to that <p> tag, not
the
<div>, <body> and <html> tags surrounding it.
So far my thinking has been to use something like this:
$(function() {
$("*").hover(
function(){
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
Which adds the "selected" class to any element Ihoverover fine. It
also removes it.
The problem is thehoveris firing all the way up the chain and
hitting all elements from the lowest to the highest so I've got
a ton
of ugly selected elements when I really just wanted the lowest
one...
Is there any way I can restrict it?
Thanks,
John
