Question

我是JQuery的新手。我有一个css类的按钮工作正常，但我想在我按下按钮时更改css类。

我该如何编码？

这是我到目前为止所得到的：

//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>

Answer 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/

Answer 2

更改对#btn的引用。

$(document).ready(function(){

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

});

见JSfiddle：

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

Answer 3

无论如何，要使代码正常工作，请将选择器更改为

$('#btn')

Answer 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 Object的函数。 mouseenter和mouseleave。因此，我们可以假设它不是mouseenter它是mouseleave。

JQuery在悬停按钮ASP.net上更改类

4 个答案: