Возникла проблема с функцией наведения jQuery

Question

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 (который стоит внутри навеса .row div ) и исчезает при размытии.
2. При .remove щелкнуть, получить атрибут узла родительского div

JsFiddle

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

Я что-то упустил?

Answer 1

1. Для увеличения при наведении на изображение, создайте изображение с классом .remove (который находится внутри hovered .row div) и затемните при событии размытия.

Это переключит класс «удалить» в строке зависания.

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

Вы также должны использовать stop (true, true) , чтобы очистить очередь анимации и завершить любую текущую анимацию.

1. При щелчке .remove получить атрибут узла родительского div

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

Просмотр демо .

Answer 2

Это работа для 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/

Answer 3

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

попробуйте это.

Answer 4

Проверьте синтаксис:

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

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

Отредактировано: События BLUR не работают на DIV, поэтому вы можете попробовать использовать mouseout, например

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