Question

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

这样做的一种方法是使用alert（），但每次我去按钮它会显示一个我不想要的警报我只想在按钮顶部显示一个简单的文本等将鼠标悬停在它上面。

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

Answer 1

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

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

Demo Fiddle

Answer 2

假设您已经知道如何获取按钮的状态，我们假设您将该状态分配给名为... well，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
});

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

2 个答案:

Demo Fiddle