JQuery: add border on hover element, but NOT parents

Question

I have this code:

var originalBorder = container.css("border"); container.hover(function(event) { event.stopPropagation(); $(this).css("border", "1px solid "+options.color); },function(){ $(this).css("border", originalBorder); }); 

What I use to add a border to the current hover element. However, for example, if a span is inside a div , they will both get borders. I only want to target span . I thought adding event.stopPropagation() would do the trick (this is what I would do in Flex, which I'm used to), but I think it's a live event, which I don't even understand what that means. So basically, how can you configure the youngest element without starting the parents?

Thanks!!

Update

Additional Information. I am trying to add this effect to every element. so I actually added the effect to the div and span , but I want the div fire when it is the youngest element that hangs. And when the youngest element hangs like a span inside a div , then only the span launched. The code above is a plugin, and I call it like this: #("*").doBorders()

Answer 1

I think it is just a matter of what your selector selects a container.

If you can, make sure that the first selector selects the child - the child that you want to manipulate ...

something like that:

  $(".childSpanClass").hover( function () { $(this).css("border", "1px solid "+options.color); }, function () { $(this).css("border", originalBorder); } ); 

If you cannot select a child there, you can select a child element within functions, for example:

  $(".container").hover( function () { $(this).children(".childClass").css("border", "1px solid "+options.color); }, function () { $(this).children(".childClass").css("border", originalBorder); } ); 

Update: Given your update, you can try to switch to it from the point of view of a child liberating the boundaries of parents:

 $(".container").hover( function () { $(this).parents().css("border", ""); $(this).css("border", "1px solid blue"); }, function () { $(this).css("border", ""); } );