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
