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