CODEWITHSUNDEEP
javascriptjqueryhtml
Diego
Diego

Reputation: 964

MouseEnter event is not firing

I have two speech bubbles changing their content every two seconds. I am trying that each time i put my mouse over the bubbles my changeComment functions stops, this way the user will have more time to read the comment, and when the mouse leaves the bubbles the function will start again.

I have my demo here: http://jsbin.com/EMogAfud/1

This are the functions I am using

$("bubbleSpeech").mouseenter(function(){
  clearInterval(intervalStop);
});

$("bubbleSpeech").mouseleave(function(){
  show();
  intervalStop=setInterval(show,pause);
});

Not quite sure why it's not working. I am not getting the event fire.

Thanks in advance

Upvotes: 0

Views: 90

Answers (3)

Diego
Diego

Reputation: 964

Thanks for the comments They are two ways for doing this.

Using Jquery

$("#bubbleSpeech").mouseenter(function(){
  clearInterval(intervalStop);
});

$("#bubbleSpeech").mouseleave(function(){
  show();
  intervalStop=setInterval(show,pause);
});

Or using pure javascript

Demo: http://jsbin.com/ejiFixeG/2

mainSlider=document.getElementById('bubbleSpeech');

mainSlider.onmouseenter = function(){
  clearTimeout(timerStop)   ;
  clearInterval(intervalStop);
};

mainSlider.onmouseleave = function(){
  show();
  intervalStop=setInterval(show,pause);
};

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

You are missing #

id-selector

$("#bubbleSpeech")
^ // added # for id-selector

Upvotes: 0

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

You forgot to use the '#' :

$("#bubbleSpeech").mouseenter(function(){
  clearInterval(intervalStop);
});

$("#bubbleSpeech").mouseleave(function(){
  show();
  intervalStop=setInterval(show,pause);
});

Upvotes: 2

Related Questions