Событие MouseEnter не срабатывает

Question

У меня есть два пузырька речи, меняющих свое содержание каждые две секунды. Я пытаюсь, чтобы каждый раз, когда я наводил указатель мыши на пузырьки, мои функции changeComment останавливаются, таким образом у пользователя будет больше времени, чтобы прочитать комментарий, и когда мышь покинет пузырьки, функция снова запустится.

У меня есть демо здесь: http://jsbin.com/EMogAfud/1

Это являются функции, которые я использую

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

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

Не совсем уверен, почему это не работает. Я не получаю пожар событий.

Заранее спасибо

Answer 1

Вы забыли использовать '#':

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

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

Answer 2

У вас не хватает #

id-selector

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

Answer 3

Спасибо за комментарии они два пути для этого.

Использование Jquery

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

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

Или, используя чистый JavaScript

Демо: http://jsbin.com/ejiFixeG/2

mainSlider=document.getElementById('bubbleSpeech'); 

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

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