【问题标题】：Having issue with jQuery hover functionjQuery悬停功能有问题
【发布时间】：2012-02-27 07:20:40
【问题描述】：

JS

$(".row").live("hover",
    function()
    {
        $(".remove").fadeIn();
    }
    );
$(".row").live("blur",
    function()
    {
        $(".remove").fadeOut();
    }
    );

HTML 标记

<div class="row chapter" node="1">
  <img class="remove" src="design/images/remove.png">
  Sample
</div>
<div class="row chapter" node="2">
  <img class="remove" src="design/images/remove.png">
  Sample 2
</div>

我想做的是，

在悬停事件上淡入，图像类.remove（代表 在.row div 内部悬停）并在模糊事件时淡出。
点击.remove，获取父div的节点属性

JsFiddle

http://jsfiddle.net/tt13/3VG5P/3/

我错过了什么吗？

【问题讨论】：

标签： javascript jquery function click hover

【解决方案1】：

要在悬停事件时淡入，使用 .remove 类的图像（位于悬停的 .row div 内）并在模糊事件时淡出。

这将在悬停的行中切换“删除”类。

$('.row').hover(function() {
  $(this).find('.remove').stop(true, true).fadeIn();
}, function(){
  $(this).find('.remove').stop(true, true).fadeOut();
});

您还应该使用stop(true, true) 来清除动画队列并结束所有正在进行的动画。

.remove 点击后，获取父 div 的节点属性

$('.remove').click(function() {
    var $parent = $(this).parent();
    var nodeValue = $parent.attr('node') || "missing-node-value";
    console.log("node =", nodeValue); // DEBUG
    $parent.slideUp();
});

查看demo。

【讨论】：

用click 事件为.remove 元素更新了我的答案。

【解决方案2】：

$(".row").hover(function(){
   $(".remove", this).stop().fadeIn();
}, function(){
  $(".remove", this).stop().fadeOut();
});

试试这个。

【讨论】：

【解决方案3】：

这是 CSS 的工作，而不是 jQuery。我会使用这个简单的 CSS：

.row .remove {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.row:hover .remove {
    opacity: 1;
}

演示http://jsfiddle.net/KPQ5h/

如果你还想要javascript：

$(".row").on({
    mouseover: function() {
        $(this).find('.remove').fadeIn();
    },
    mouseout: function() {
        $(this).find('.remove').fadeOut();
    }
});

http://jsfiddle.net/KPQ5h/1/

【讨论】：

第一个问题的非常好的解决方案。向上。现在第 2 次：在 .remove 单击时，获取父 div 的节点属性。我该怎么做？

【解决方案4】：

检查语法：


(".remove").fadeIn();
//Should be
$(".remove").fadeIn();

Try:
$(this).children(".remove").fadeIn();

已编辑： BLUR 事件不适用于 DIV，因此您可以尝试使用 mouseout，例如


$(".row").live("mouseout", function() {
   $(this).children(".remove").fadeOut();
});

【讨论】：

但它会立即消失在所有 .remove 中。我需要一个站在悬停的 div 里面的那个
模糊事件在 div 上不起作用，因此请尝试使用 mouseout，请参阅编辑后的代码