Question

我有一些div元素，每个元素都包含几个div元素。所以我想在悬停中实现这些div元素。我不确定使用悬停还是鼠标中心。例如，在div的悬停中，它必须运行animate am move to left或更改其颜色。但即使我将鼠标移动到其他地方，效果仍然存在，这不是我想要的。我希望它像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

我会这样做

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

您好，您可以先在.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 4

您也可以使用toggleClass

Fiddle Demo

是否有用于悬停或鼠标中心/鼠标的切换？

4 个答案: