jQuery.mouseover()方法的使用方式

jQuery.mouseover()方法

jQuery.mouseover()方法可以在鼠标悬停在元素上时，触发指定的函数。该方法是mouseover事件的快捷方式，可以替代mouseover事件，但是它只能绑定一个函数，而mouseover事件可以绑定多个函数。

$("#element").mouseover(function(){
    // 执行函数
});

使用jQuery.mouseover()方法时，可以向函数传递参数，如下所示：

$("#element").mouseover(function(event){
    // 执行函数
}, param1, param2, ...);

可以使用jQuery.mouseover()方法来添加鼠标悬停效果，如下所示：

$("#element").mouseover(function(){
    $(this).addClass("hover");
});

也可以使用jQuery.mouseover()方法来实现悬停时显示提示信息，如下所示：

$("#element").mouseover(function(){
    var title = $(this).attr("title");
    $(this).data("tipText", title).removeAttr("title");
    $("
")
        .text(title)
        .appendTo("body")
        .fadeIn("slow");
});

$("#element").mouseout(function(){
    $(this).attr("title", $(this).data("tipText"));
    $(".tip").remove();
});

还可以使用jQuery.mouseover()方法来实现悬停时显示图片，如下所示：

$("#element").mouseover(function(){
    var imgSrc = $(this).attr("src");
    $(this).data("imgSrc", imgSrc).removeAttr("src");
    $("")
        .attr("src", imgSrc)
        .appendTo("body")
        .fadeIn("slow");
});

$("#element").mouseout(function(){
    $(this).attr("src", $(this).data("imgSrc"));
    $(".img").remove();
});

jQuery.mouseover()方法是一种非常有用的方法，可以让我们实现很多有趣的功能。