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

Posted 2023-05-08

【中文标题】悬停按钮 ASP.net 上的 JQuery 更改类

【英文标题】：JQuery change class on hover button ASP.net

【发布时间】：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> 

【参考方案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。