Response title
This is preview!
Move this topic
[jQuery] Hover on all elements: $(*).hover(...)
in Using jQuery
•
14 years ago
Heyo jQuery hackers,
I'm putting together a little script that adds a class "selected" to
an element when you hover over 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
deep inside a document - I
would like to only add the class "selected" to that
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 I hover over fine. It
also removes it.
The problem is the hover is 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
Replies(11)
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
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 the
hover won't be applied to the most of the text
Leave a comment on balazs.endresz's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
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
with a <strong> inside you couldn't select the
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
Leave a comment on bishanty's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
$('*').hover( function(event){
$(this).addClass('selected');
event.stopPropagation();
},
function(event){
$(this).removeClass('selected');
event.stopPropagation();
});
Leave a comment on aaronjacobstewart's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
I'm not sure I get it, but if you want to grab the <strong> inside a
when the event is only bound to
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
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/
Leave a comment on balazs.endresz's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
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.
Leave a comment on benjamwelker's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">This one worked for me...<div>
</div><div><div>$('body').bind('mouseover', function(event) {</div><div> $(event.target).addClass('selected');</div><div>}).bind('mouseout', function(event) {</div><div> $(event.target).removeClass('selected');</div><div>});</div><div>
</div><div>You'll run into problems if you have properties assigned to more specific selectors in your stylesheet, but otherwise, it should work fine.</div><div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 17, 2008, at 9:50 AM, benjam wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
This is insanely kludgy, not very pretty, and probably slower than a
more elegant solution.
But it works.
<span class="Apple-tab-span" style="white-space:pre"> </span>$('*').hover(
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>function(event) {
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>var $this = $(this);
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.addClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parents( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>function(event) {
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>var $this = $(this);
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parents( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parent( ).addClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.children( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}
<span class="Apple-tab-span" style="white-space:pre"> </span>);
I'm sure there are better solutions out there, but this was the
fastest and easiest method.
</div><div><div>$('body').bind('mouseover', function(event) {</div><div> $(event.target).addClass('selected');</div><div>}).bind('mouseout', function(event) {</div><div> $(event.target).removeClass('selected');</div><div>});</div><div>
</div><div>You'll run into problems if you have properties assigned to more specific selectors in your stylesheet, but otherwise, it should work fine.</div><div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 17, 2008, at 9:50 AM, benjam wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
This is insanely kludgy, not very pretty, and probably slower than a
more elegant solution.
But it works.
<span class="Apple-tab-span" style="white-space:pre"> </span>$('*').hover(
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>function(event) {
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>var $this = $(this);
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.addClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parents( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>function(event) {
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>var $this = $(this);
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parents( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.parent( ).addClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$this.children( ).removeClass('selected');
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}
<span class="Apple-tab-span" style="white-space:pre"> </span>);
I'm sure there are better solutions out there, but this was the
fastest and easiest method.
Leave a comment on kswedberg's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
Aaron, I had the same thought - when tried event.stopPropagation() it
just kept on sailing right up (though I'd like to test this again).
What I ended up with was a solution with a two global variables.
var flip = True;
var hover;
function hoverIn(event) {
if (flip) {
$(this).addClass('selected');
if (hover && hover != this) {
$(hover).removeClass('selected');
}
hover = this;
flip = false;
}
}
function hoverOut(event) {
$(this).removeClass('selected');
flip = true;
}
$("*").hover(hoverIn, hoverOut);
Thanks everyone for your help!
John
Leave a comment on bishanty's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
Nicely done Karl, I knew there was a better way.
Leave a comment on benjamwelker's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
Interesting.
Does anyone know if event.stopPropagation() is broken, not implemented
for the hover() anonymous functions, or we are using it wrong?
Leave a comment on aaronjacobstewart's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
Thanks a bunch Karl - I switched to your way much smoother : )
John
Leave a comment on bishanty's reply
Re: [jQuery] Hover on all elements: $(*).hover(...)
14 years ago
You can do it with the hover function too for a bit shorter code ;)
$('body').hover(
function(e){
$(e.target).addClass('selected');
},
function(e){
$(e.target).removeClass('selected');
}
);
Leave a comment on ricardobeat's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to bishanty's discussion
{"z2969464":[14737000000333995,14737000000333999,14737000000334009,14737000000334015],"z2949822":[14737000000333997,14737000000334003],"z2949655":[14737000000334017],"z2951840":[14737000000334005,14737000000334011],"z2961168":[14737000000334001,14737000000334013],"z464496":[14737000000334007]}
Statistics
- 11 Replies
- 1289 Views
- 0 Followers