CODEWITHSUNDEEP
javascriptjquerycsshovermousemove
user3870112
user3870112

Reputation: 311

Mousemove animate on hover

I want to make an animation hover on a div. But it doesn't work, when my mouse is outsite the div, the animation doesn't work. Why ?

https://jsfiddle.net/udn5b9fd/

$(document).mousemove(function(e){
$("span").css({left:e.pageX - 50, top:e.pageY - 50});
});


$("div").hover(

  function() {
  $("span").stop().animate({"height": "100px", "width": "100px"}, 200);
  },
  function() {
  $(this).stop().animate({"opacity": "0.5"}, 0);
  },
  function() {
  $(this).stop().animate({"opacity": "1"}, 0);

});

Upvotes: 1

Views: 469

Answers (1)

Telman
Telman

Reputation: 1477

There are several fixes, you should apply:

  1. Remove 3rd function from hover callback, since it has only 2 parameters: Jquery Hover
  2. Update all the properties in each of the handlers: opacity, height, width
  3. Add pointer-events: none style to your span element, to prevent calling hoverOut when your mouse under the span.

Look at the example for more details: JSFiddle example

Upvotes: 2

Related Questions