onmouseout在交换文本时出错

Error with onmouseout in exchanging text

本文关键字：出错 文本 交换 onmouseout      更新时间：2023-09-26

我有一个链接，在那里我使用Javascript动画文本的变化。我想创建的行为如下

1)用户将鼠标悬停在文本上，一个不同的文本淡入2)当用户移动光标时，文本恢复正常。

我已经设法通过查看另一个代码来创建文本的变化，但是我遇到了麻烦，所以当光标离开链接时，文本会变回来。

你可以看看这里的jsfiddle ->

http://jsfiddle.net/3WMyQ/

我得到错误

Uncaught TypeError: Object [object Object] has no method 'onmouseout'

这是html ->

          <a href="#" id="stepan_says">
            <span>The way you get what you want out of life is...</span>
          </a>

JS ->

$("#stepan_says").hover(function(){
    $(this).find("span").animate({opacity:0},function(){
        $(this).text("I have no idea! But here's the philosophy!")
            .animate({opacity:1});  
    })
    $(this).onmouseout(function(){
        $(this).find("span").animate({opacity:0},function(){
            $(this).text("This is the third text!")
                .animate({opacity:1});  
        })
    });
});

帮助非常感谢!:)

使用hover的回调函数代替mouseleave。你不需要另一个活动。鼠标悬停的回调将完全按照你的要求进行。

       $("#stepan_says").hover(function(){
            $(this).find("span").animate({opacity:0},function(){
                $(this).text("I have no idea! But here's the philosophy!")
                    .animate({opacity:1});  
            })                              
        },function(){
          $(this).find("span").animate({opacity:0},function(){
                    $(this).text("This is the third text!")
                        .animate({opacity:1});  
                })
        });
演示

没有onmouseout在jQuery中，这是一个本地事件，尝试:

$(this).on('mouseout', function(){
   // do stuff
});

然而，hover()已经为mouseenter和mouseleave都有回调，所以使用它们:

$("#stepan_says").hover(function () {
    $(this).find("span").animate({ opacity: 0 }, function () {
         $(this).text("I have no idea! But here's the philosophy!")
                .animate({ opacity: 1 });
    });
},function () {
    $(this).find("span").animate({ opacity: 0 }, function () {
         $(this).text("This is the third text!")
                .animate({ opacity: 1 });
    });
});

没有这样的方法onmouseout

试

$(this).mouseleave(function(){
        $(this).find("span").animate({opacity:0},function(){
            $(this).text("This is the third text!")
                .animate({opacity:1});  
        })
    });

小提琴

既然你使用的是悬停，那么你可以像

$("#stepan_says").hover(function(){
    $(this).find("span").stop().animate({opacity:0},function(){ 
        $(this).text("I have no idea! But here's the philosophy!").animate({opacity:1});  
    });
}, function(){
    $(this).find("span").stop().animate({opacity:0},function(){ 
        $(this).text("This is the third text!").animate({opacity:1});  
    });
});

结构为

$("selector").hover(function(){ // on mouse over 
}, function(){ // on mouse out
});
相关文章：