How To Change the content/value of button with jQuery with it being in its hover state

Question

i have a button and would like to change the content of it when its in its hover state. I looked through alot of the question that may already have my answer, and unfortunately came up blank, your help is greatly appreciated. This is what i have so far

Thanks Guys

$("#button").hover(function(){
$(this).html("click me");
}

Answer 1

You can use hover() handler like this

 $("#button").hover(function() { $(this).html("click me"); }, function() { $(this).html("click"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id=button>click</button> 

Update : If you are using input tag then use val() instead of html()

 $("#button").hover(function() { $(this).val("click me"); }, function() { $(this).val("click"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type=button id=button value=click> 

Answer 2

 $("#button1").hover(function() { $(this).val("click me"); }, function() { $(this).val("hi") }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="button1" type="button" value="hi">