懸停div以在jquery問題中顯示文本

Question

我在這里有問題。 當我的鼠標懸停在div上時，div中會出現一個文本。 當它從div移出鼠標時，文本將消失。 但是我的問題是，當鼠標懸停在出現的文本上時，它將被認為是從div中移出，導致文本消失。 我如何避免這種情況？ 我希望只要鼠標在div中就可以保留文本，即使它位於文本上方。 謝謝..

<div class="passd"></div>

    $('.passd').live("mouseover", function(){
  if($(this).children('#passopt').length==0){
   $(this).append('<p id="passopt">appear text</p>');
  }
 });
 $('.passd').live("mouseout", function(){
  $(this).children('#passopt').remove();
 });

Answer 1

嘗試這個：

$('.passd')
    .live("mouseenter", function() {
        $(this).append('<p id="passopt">appear text</p>');
    })
    .live("mouseleave", function() {
        $(this).children('#passopt').remove();
    });

經過測試，可以正常運行： http ： //jsfiddle.net/xLzdP/

Answer 2

您可以改用mouseleave事件...

http://api.jquery.com/mouseleave/

Answer 3

查看http://flowplayer.org/tools/tooltip/index.html看看它是否可以完成您想要的...

Answer 4

使用.hover（）可以實現同樣的效果：

    $('.passd').hover(function() {
        $(this).append('<p id="passopt">appear text</p>');
}, function(){
        $(this).children('#passopt').remove();
    });