當鼠標懸停在jquery上時顯示按鈕的狀態

Question

我正在使用html和jquery的應用程序上。 當我單擊它們時，它具有4個用於執行各種任務的按鈕。 我現在想要的是在鼠標懸停在按鈕上時向用戶顯示按鈕的狀態。 例如，對於一個開/關按鈕，如果鼠標懸停在該按鈕上，則會向用戶顯示該按鈕當前處於關閉狀態或打開狀態。

一種方法是使用alert（），但是每次我轉到按鈕時，它將顯示一個警報，我不希望我只想在鼠標懸停在按鈕上方時在按鈕上方顯示一個簡單的文本等。

任何人都可以幫助我，我該怎么辦？

Answer 1

使用jQuery .hover()更改按鈕懸停按鈕的文本：

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

演示小提琴

Answer 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
});