jquery - How to set style to this element

Question

I have this script to set box-shadow if element is hovered. It should also remove the parent(s) style at the same time:

  var on = {
    boxShadow : "inset 0px 0px 0px 1px  #f80"
  };

  var out = {
    boxShadow : "inset 0px 0px 0px 0px  #f80"
  };

$('body *').hover(function(e) {
  $(this).css(out);
  $(this).css(on); 
  e.stopPropagation();
}, function() {
  $(this).parent().css(out);
  $(this).css(out);
});

If you look at this example JsFiddle you will see that if you hover the span its parent (p) will also gain the style. What can I do to style only the element that is being hovered, so not its child nor its parent? Do I have to use each() ?

Answer 1

Got it working thanks to God:

JsFiddle

  var on = { boxShadow : "inset 0px 0px 0px 1px  #f80" };

  var out = { boxShadow : "inset 0px 0px 0px 0px  #f80" };

$('body *').hover(function(e) {
    $(this).parents().css(out);
  $(this).css(on); 
  e.stopPropagation();
}, function() {
  $(this).parent().css(out);
  $(this).css(out);
    $(this).parent().css(on);
});

You see @adeneo there is no problem:)