Javascript 交换文本时onmouseout出错

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

1） 用户将鼠标悬停在文本上，不同的文本将淡入 2） 当用户将光标移开时，文本将恢复正常

我已经设法通过查看其他人的代码来创建文本的更改，但是我很难做到这样，当光标离开链接时，文本会重新更改

您可以在这里查看JSFIDLE-->

我得到了错误

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

这是html-->

---

非常感谢您的帮助！：）

jQuery中没有

onmouseout

，这是本机事件，请尝试：

$(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

试一试

---

由于您使用的是“悬停”，因此可以继续使用

$("#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

});

---

使用

hover

的回调函数代替

mouseleave

。你不需要其他活动。调用hover将完全满足您的要求

       $("#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});  
                })
        });

---

mouseout

而不是

onmouseout

$("#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

});

       $("#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});  
                })
        });