Having issue with jQuery hover function

Question

JS

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

HTML Markup

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

What I want to do is,

to fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.
On .remove click, get parent div's node attribute

JsFiddle

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

Am I missing something?

Stefan · Accepted Answer · 2012-02-27 08:26:34Z

1

To fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.

This will toggle the class "remove" within the hovered row.

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

You should also use stop(true, true) to clear the animation queue and end any ongoing animation.

On .remove click, get parent div's node attribute

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

View demo.

edited Feb 27, 2012 at 8:26

answered Feb 27, 2012 at 7:32

Stefan

5,6624 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefan Over a year ago

Updated my answer with the click event for .remove elements.

dfsq · Accepted Answer · 2012-02-27 07:38:49Z

1

This is a job for CSS, not jQuery. I would use this simple 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;
}

Demo http://jsfiddle.net/KPQ5h/

If you still want javascript:

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

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

edited Feb 27, 2012 at 7:38

answered Feb 27, 2012 at 7:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Tural Ali Over a year ago

Very good solution for 1st problem. UP. Now 2nd: On .remove click, get parent div's node attribute. How can I do this?

Sudhir Bastakoti · Accepted Answer · 2012-02-27 07:39:53Z

1

Check the syntax:


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

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

Edited: BLUR events dont work on DIVs so you could try using mouseout, like


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

edited Feb 27, 2012 at 7:39

answered Feb 27, 2012 at 7:23

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

2 Comments

Tural Ali Over a year ago

But it fades in all .remove at once. I need the one which stands inside hovered div

Sudhir Bastakoti Over a year ago

blur events dont work on div's so try using mouseout, see the edited code pls

littlealien · Accepted Answer · 2012-02-27 07:32:34Z

0

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

try this one.

answered Feb 27, 2012 at 7:32

littlealien

4294 silver badges12 bronze badges

Collectives™ on Stack Overflow

Having issue with jQuery hover function

JS

HTML Markup

JsFiddle

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS

HTML Markup

JsFiddle

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related