是否有切換懸停或mouseenter/mouseleave？

Question

我有一些div元素，每個元素裏面都包含幾個div元素。所以我想讓這些div元素在懸停中生效。我不確定使用懸停或鼠標。例如，在懸停的div中，它必須運行一個向左移動或改變其顏色的動畫。但即使將鼠標移動到其他地方，效果也會保持不變，而這並不是我想要的。我希望它像css hover一樣工作，在mouseleave後面移動。 DEMO

這裏是我的代碼：

$(document).ready(function(){ 
    $(".close").hide(); 
    $(".ln, .gw, .mc, .rt").hover(function(){ 
     var classname = $(this).parent(); 
     var name = $(classname).children(':first-child').next(); 

     $(name).animate({ 
      "margin-left": "100px"       
     }, 500); 

     $(classname).find(".close").fadeIn(500); 
    }); 
}); 

HTML

<div class="item1"> 
    <div class="name1 ln">name 1</div> 
    <div class="name2 ln">name 2</div> 
    <div class="name3 ln">name 3</div> 
    <div class="close">close</div> 
</div> 
<div class="item2"> 
    <div class="name4 gw">name 1</div> 
    <div class="name5 gw">name 2</div> 
    <div class="name6 gw">name 3</div> 
    <div class="close">close</div> 
</div> 
<div class="item3"> 
    <div class="name7 mc">name 1</div> 
    <div class="name8 mc">name 2</div> 
    <div class="name9 mc">name 3</div> 
    <div class="close mc">close</div> 
</div> 
<div class="item4"> 
    <div class="name10 rt">name 1</div> 
    <div class="name11 rt">name 2</div> 
    <div class="name12 rt">name 3</div> 
    <div class="close">close</div> 
</div> 

任何想法？

Answer 1

你好，你可以先添加其他類上的所有項目，如.item瞄準每一個，然後只在第二個使用jQuery DIV，試試這個：

$(".item").each(function(){ 
    $(this).find('div').eq(1).hover(function(){ 
     var name = $(this); 
     $(this).toggleClass('active'); 
     if($(this).hasClass('active')){ 
      $(name).stop().animate({ 
      "margin-left": "100px"       
      }, 500); 
     } else { 
      $(name).stop().animate({ 
      "margin-left": "0"       
      }, 500); 
     } 
     $(this).parent().find(".close").stop(true,true).fadeToggle(500); 
    }) 
}) 

入住這Demo Fiddle

Answer 2

使用一個回調函數

$(document).ready(function(){ 
    $(".close").hide(); 
    $(".ln, .gw, .mc, .rt").hover(function() { 
     console.log('working'); 
     var classname = $(this).parent(); 
     var name = $(classname).children(':first-child').next(); 

     $(name).stop().animate({ 
      "margin-left": "100px"       
     }, 500); 

     $(classname).find(".close").fadeIn(500); 
    }, function() { 
     console.log('workign2'); 
     var classname = $(this).parent(); 
     var name = $(classname).children(':first-child').next(); 

     $(name).stop().animate({ 
      "margin-left": "0px"       
     }, 500); 
     $(classname).find(".close").fadeOut(500); 
    }); 

Demo

Answer 3

我會做這個

$(document).ready(function(){ 
    $(".close").hide(); 
    $(".ln, .gw, .mc, .rt").hover(function(){ 
     var classname = $(this).parent(); 
     var name = $(classname).children(':first-child').next(); 

     $(name).stop(); 
     $(name).animate({ 
      "margin-left": "100px"       
     }, 500); 

     $(classname).find(".close").stop(); 
     $(classname).find(".close").fadeIn(500); 
    }, function(){ 
     var classname = $(this).parent(); 
     var name = $(classname).children(':first-child').next(); 

     $(name).stop(); 
     $(name).animate({ 
      "margin-left": "0px"       
     }, 500); 

     $(classname).find(".close").stop(); 
     $(classname).find(".close").fadeOut(500); 
    }); 
}); 

如jQuery代碼。 固定它;）

Answer 4

您還可以使用toggleClass

Fiddle Demo