当鼠标悬停在jquery上时显示按钮的状态答案

【问题标题】：show state of a button in jquery when mouse hovers on it当鼠标悬停在jquery上时显示按钮的状态
【发布时间】：2014-04-08 02:03:43
【问题描述】：

我正在开发一个使用 html 和 jquery 的应用程序。它有 4 个按钮，当我单击它们时用于执行各种任务。我现在想要的是当鼠标悬停在按钮上时向用户显示按钮的状态。例如，对于开/关按钮，如果鼠标悬停在按钮上，它会向用户显示该按钮当前处于关闭或打开状态。

做到这一点的一种方法是使用alert()，但是每次我点击按钮时，它都会显示一个警报，我不希望我只想在鼠标时在按钮顶部显示一个简单的文本等将鼠标悬停在上面。

任何人都可以帮助我，我该怎么做？

【问题讨论】：

到目前为止你有什么代码？最直接的方法是简单地更改按钮的文本以反映适当的状态。
@user3298740 如果可能，发帖html、css、js？
如何确定按钮的 ON 或 OFF 状态？

标签： javascript jquery html css hover

【解决方案1】：

使用 jQuery .hover() 更改按钮悬停时按钮的文本：

$('button').hover(function(){
    $(this).text('ON');
},function(){
    $(this).text('OFF');
});

Demo Fiddle

【讨论】：

【解决方案2】：

假设您已经知道如何获取按钮的状态，假设您将该状态分配给一个名为...的变量...好吧，state。 :)

那么从那里开始就很简单了：

$("button").hover(function() { // You may choose a different selector for your buttons
    var curButton = this,
        $curButton = $(this);

    curButton.oldHTML = $curButton.html(); // Cache old button label
    $curButton.html(state); // Change button label to reflect state

}, function() {
    var curButton = this,
        $curButton = $(this);

    $curButton.html(curButton.oldHTML); // Restore old HTML
});

【讨论】：