Как использовать свойство hover одновременно с мышью jQuery?

Question

Я кодировал простой div, содержащий изображение, которое следует за курсором мыши, только когда мышь присутствует в div, используя свойство mouseQove jQuery. Это прекрасно работает, за исключением того, что я хотел бы, чтобы изображение было скрыто по умолчанию и появлялось только при наличии мыши (а затем, когда мышь уходит, снова исчезать). Обычно это можно обрабатывать с помощью свойства hover, но он не работает при размещении со свойством mousemove. Есть идеи? Вот основной код, который я сейчас использую:

$('.containerDIV').mousemove(function(e) {$('.image').css({'left' : e.pageX+'px',});});

Вот демонстрационная страница: http://www.fluidweb.ca/movingImage

Спасибо за помощь!

Andrew

Answer 1

Возможно, было бы лучше связать событие jQuery.mousenter и jQuery.mouseleave с самим div.

$("div.containerDIV").mouseenter(function(){
  $("img.sun").show();
}).mouseleave(function(){
  $("img.sun").hide();
});

Answer 2

Просто проще:

$("div.containerDIV").hover(function(e){
    $("img.sun")[e.type === 'mouseenter' ? 'show' : 'hide']();
});