Issue to apply hover with jquery when elements share the same class

Issue to apply hover with jquery when elements share the same class

I have an isse to apply hover with jquery when elements share the same
class. This works pretty fine when using just CSS, but as long as JQuery
appears, it changes everything.
CSS
.btn {
background:#ccc;
padding:10px;
}
.btn:hover {
background:red;
padding:10px;
}
HTML
<a class="btn">Button 1</a><br /><br /><br />
<a class="btn">Button 2</a><br /><br /><br />
<a class="btn">Button 3</a><br /><br /><br />
<div id="paragraph"><p>Everything works fine with normal css
Hover...</p></div>
<input type="button" id="btnchange" value="Change to JQuery Hover, blue
color" />
JQuery
$('#btnchange').bind('click', function() {
$(".btn").hover(function(){
$(".btn").css({background: "blue"});
},function(){
$(".btn").css({background: "#ccc"});
});
$("#paragraph").html('<p>But then, when applying jquery
hover, things work unexpectedly</p>');
});
Here is the live Fiddle