悬停按钮 ASP.net 上的 JQuery 更改类答案

【问题标题】：JQuery change class on hover button ASP.net悬停按钮 ASP.net 上的 JQuery 更改类
【发布时间】：2011-10-23 21:42:11
【问题描述】：

我是 JQuery 的新手。我有一个带有 css-class 的按钮工作正常，但我想在悬停按钮时更改 css-class。

如何编码？

这是我目前得到的：

//on top in my heading:

<script type="text/javascript">
    $('btn').hover(function () {
        alert("Test"); //just for testing
    });
</script>

//my button:

<button id="btn" class="default_btn">ButtonText</button>

【问题讨论】：

标签： jquery asp.net css button hover

【解决方案1】：

为什么不试试 CSS？

.default_btn:hover{
    background-color: #f00;
}

在这里演示：http://jsfiddle.net/naveen/Ytkma/

如果你想要 jQuery 解决方案，试试这个。

$("#btn").hover(function() {
        $(this)
            .removeClass("default_btn")
            .addClass("default_hover_btn");
    }, function() {
        $(this)
            .removeClass("default_hover_btn")
            .addClass("default_btn");
});

演示：http://jsfiddle.net/naveen/SfGVD/

【讨论】：

我知道如何在 CSS 中做到这一点，但尝试学习 JQuery 并想尝试用它来做到这一点 =)
你可以使用toggle类的方法

【解决方案2】：

更改对#btn 的引用。

$(document).ready(function(){

    $('#btn').hover(function () {
            alert("Test"); //just for testing
        });

});

参见 JSfiddle：

http://jsfiddle.net/Curt/CKXw3/1/

【讨论】：

我错过了按钮 ID 前的“#”，忘记了顶部的 (document).ready-part。

【解决方案3】：

无论如何，为了让您的代码正常工作，请将您的选择器更改为

$('#btn')

【讨论】：

【解决方案4】：

如果您想在 jQuery 中选择 ID，您只需像在 css 中一样：#id，在您的情况下为 #btn

jQuery 帮助函数hover 通常需要回调。一个鼠标悬停，一个鼠标移出。

$(document).ready(function(){
    $('#btn').hover(function(){
        alert("over");
    },function(){
        alert("out");
    });
});

另一种方法是检测事件类型：

$(document).ready(function(){
    $('#btn').hover(function(event){
        if (event.type == "mouseenter") {
            console.log("over");
        } else {
            console.log("out");
        }
    });
});

函数 hover 绑定到 jQuery 对象的函数。 mouseenter 和 mouseleave。因此我们可以假设如果不是mouseenter，它就是mouseleave。

【讨论】：