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');
}
);
On Sep 18, 2:16 pm, John Boxall <[EMAIL PROTECTED]> wrote:
> Thanks a bunch Karl - I switched to your way much smoother : )
>
> John
>
> On Sep 18, 6:54 am, benjam <[EMAIL PROTECTED]> wrote:
>
> > Nicely done Karl, I knew there was a better way.
>
> > On Sep 17, 1:54 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > > 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 Swedbergwww.englishrules.comwww.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/...
>
> > > >> 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
