滑鼠懸浮按鈕背景變色效果程式碼例項

螞蟻小編發表於2017-03-16

在不少網站，為了美觀，當滑鼠懸浮在按鈕上面的時候能夠實現背景變色效果，本章節分享一段jquery實現的此效果，當然不夠美觀，實際應用的時候還需要進行進一步的美化，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.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; 
} 
.btn-hover{ 
  opacity:0.8;
  background:blue;
} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $('.round-corner-btn').hover(function(){ 
    $(this).toggleClass('btn-hover', 200); 
  }) 
})
</script> 
</head>
<body>
<div class='round-corner-btn'> 按鈕</div>
</body>
</html>

程式碼非常的簡單這裡就不多介紹了，具體可以參閱jQuery toggleClass()一章節。

相關文章