JQuery toggleClass is used to change the color over the mouse

  • 2020-03-30 02:57:29
  • OfStack

Button to move the color change effect
 
<style> 
.round-corner-btn { 
-moz-border-radius:4px; 
-webkit-border-radius: 4px; 
-khtml-border-radius: 4px; 
border-radius: 4px; 

width:200px; height:40px; line-height: 40px; 
background: green; 
display:inline-block; 
color:white; 
text-align : center; 
cursor: pointer; 
} 

.avatar_size{ 
font-size:12px; 
text-align: center; 
margin-top:4px; 
} 

.btn-hover{ 
opacity: 0.8; 
} 
</style> 
<div class='round-corner-btn'>  button </div> 
<script> 
$('.round-corner-btn').hover(function(){ 
$(this).toggleClass('btn-hover', 200); 
}) 
</script> 

Related articles: