jquery como permitir que apenas efeito sobre div atribuído, não crianças

Question

Eu apliquei um efeito mouseenter a um div. Quando você entra no div, então anima outra div. O problema é que o efeito mouseenter se aplica aos filhos Div também. Como faço para aplicar o efeito apenas para o div pai, mas animar o div crianças?

JS:

$(document).ready(function() {
  $('#slideleft').mouseenter(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "0px",
  top: "0px"
             }, 400 );
  });
  $('#slideleft').mouseleave(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "-700px",
  top: "200px"
             }, 400 );
  });

});

HTML

<div id="slideleft" class="slide"> 

  <div class="inner">Animate this element's left style property</div> 
</div> 



    </div>

Answer 1

Para aplicar apenas a animação para o div externa, você pode verificar o alvo do evento para se certificar de que corresponde à div que você selecionou em seu método jQuery. http://docs.jquery.com/Events/jQuery.Event#event. alvo

Aqui está o seu código ficaria assim:

$(document).ready(function() {
  $('#slideleft').mouseenter(function(event) {  // added 'event' as param name
        if ( this == event.target )             // ADD THIS LINE
        {
            var $lefty = $(this).children();
            $lefty.stop().animate({
                                    left: "0px",
                                    top: "0px"
                                  }, 400 );
        }
  });

  $('#slideleft').mouseleave(function(event) {
      // uncomment the below IF statement, if you only want to hide
      //  the inner div when mousing out of the outer div.
      // Otherwise the code as is will hide your div if you mouse out of either
      //  the outer or the inner div

      //if ( this == event.target )
      //{
        var $lefty = $(this).children();
        $lefty.stop().animate({
                                left: "-700px",
                                top: "200px"
                              }, 400 );
      //}
  });

});

PS: Você tem uma marca de fechamento DIV extra em seu exemplo HTML que não é necessário

.

Answer 2

Você pode evitar que as crianças disparar os eventos mousenter / mouseout por não usá-los, e usando a jQuery. pairar () função em seu div principal.

jQuery('#slideleft').hover(
        function() {
                // mouse over function
        },
        function() {
                // mouse leave function
        }
);

Answer 3

Use 'stopPropagation' nas crianças assim:

$('#slideleft *').mouseenter(function(event) {        <---- note the asterisk selector
 event.stopPropagation();                        <---- this line
});

Isso impede que o evento mouseenter de cada criança propagação para o pai. Aqui está a documentação para ele:

http://docs.jquery.com/Events/jQuery .Event # event.preventDefault.28.29

P.S. Ele conta muito para ser educado em stackoverflow. Se eu interpretei um pouco de um tom ambíguo em algumas de suas respostas acima corretamente, então você pode querer considerar suas palavras um pouco mais no futuro ;-),: -)