是否有鼠标悬停或鼠标/鼠标切换？

Question

我有一些div元素，每个元素都包含一些div元素。所以我想在悬停状态下实现这些div元素。我不确定是否使用悬停或鼠标。例如，在div的悬停中，它必须运行一个动画是向左移动或改变它的颜色。但是当我把鼠标移到其他地方时，效果依然存在，而这并不是我想要的。我希望它的工作像css悬停，移动后鼠标保存。演示

这里是我的代码：

$(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);
    });
});

<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);
    })
 })

检查这个演示Fiddle

Answer 2

我会这么做的

 $(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 3

使用回调函数

$(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);
    });

演示