JQuery - Como faço para corrigir essa imagem Rollover?

Question

Oi pessoal eu tenho este pequeno script Jquery: texto do link

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
}); 

I funciona bem, mas eu quero ser capaz de pairar sobre o texto localizado na imagem, cada vez que eu tento, ele simplesmente continua "saltando"

Qualquer ajuda é muito apreciada, obrigado, Keith

Answer 1

Boa pergunta.

O problema parece ser que, quando o mouse está sobre o parágrafo, o mouse não mais sobre a imagem é. Assim, o parágrafo está escondido. Quando o parágrafo está oculto, o mouse é novamente sobre a imagem, e assim o parágrafo é mostrado novamente. E assim por diante ...

Uma boa solução é usar mouseenter e MouseLeave eventos em vez de mouseover e mouseout:

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

A principal diferença entre mouseenter / mouseleave eventos e mouseover / mouseout eventos é que o primeiro não fazer espuma.

Neste exemplo, o parágrafo filho de div imagem # ainda receber os / eventos MouseLeave MouseEnter (mesmo se você não está ouvindo para eles), mas os eventos não vai borbulhar até seu elemento pai. Veja desta página tona uma discussão alargada sobre ele.

Você também tem que atribuir o evento não mais à tag img, mas para o div contendo. Não deve ser um problema.