jQuery悬停函数有问题

Having issue with jQuery hover function

本文关键字：有问题 函数 悬停 jQuery      更新时间：2023-09-26

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>

我想做的是

  1. 要在悬停事件时淡入，请使用类别.remove的图像（代表内部悬停.rowdiv），并在模糊事件时淡出
  2. 单击.remove，获取父div的节点属性

Js出价

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

我是不是错过了什么？

  1. 若要在悬停事件中淡入，请使用类.remove（位于悬停的.rowdiv内）进行图像处理，并在模糊事件中淡出

这将在悬停行中切换类"remove"。

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

您还应该使用stop（true，true）来清除动画队列并结束任何正在进行的动画。

  1. 点击.remove，获取父div的node属性
$('.remove').click(function() {
    var $parent = $(this).parent();
    var nodeValue = $parent.attr('node') || "missing-node-value";
    console.log("node =", nodeValue); // DEBUG
    $parent.slideUp();
});

查看演示。

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

试试这个。

这是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;
}​

Demohttp://jsfiddle.net/KPQ5h/

如果您仍然想要javascript:

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

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

检查语法：


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

编辑：BLUR事件在DIV上不起作用，所以你可以尝试使用mouseout，比如


$(".row").live("mouseout", function() {
   $(this).children(".remove").fadeOut();
});
相关文章：