mostra lo stato di un pulsante in jquery quando il mouse passa su di esso - javascript, jquery, html, css, hover

Sto lavorando ad un'applicazione usando HTML ejQuery. Ha 4 pulsanti che vengono utilizzati per eseguire varie attività quando faccio clic su di essi. quello che voglio ora è mostrare all'utente lo stato del pulsante quando il mouse ci passa sopra. Ad esempio per un pulsante ON / OFF se il mouse passa sopra il pulsante indica all'utente che il pulsante è attualmente OFF o ON.

un modo per farlo è usare un avviso () ma conche ogni volta che vado al pulsante mostrerà un avviso che non voglio, voglio solo un semplice testo ecc. da visualizzare sopra il pulsante quando il mouse ci passa sopra.

qualcuno può aiutarmi come posso farlo?

risposte:

Modificare il testo del pulsante al passaggio del mouse utilizzando jQuery .hover():

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

Demo Fiddle

Presumendo che tu sappia già come ottenere lo stato del pulsante, supponiamo che tu assegni quello stato a una variabile chiamata ... beh, state. :)

Quindi è abbastanza semplice da lì:

$("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
});