2012年2月8日 星期三

jQuery教學－滑鼠滑入變換Div區塊底色

放在<head>.....</head>之間：
View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<style type="text/css">
/* 預設樣式 */
.divbox{ 
  height:300px;
  width:200px;
  background:#ffffff;
  border:solid 1px #ccc;
  float:left;
  margin-right:10px;
 }
 
/*  滑入時變換底色樣式 */  
.divOver{
  background:#eff8fe;
 border:solid 1px #d2dce3;
 } 
</style>

View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="javascript">
 $(function(){
  //當滑鼠滑入時將div的class換成divOver
  $('.divbox').hover(function(){
    $(this).addClass('divOver');  
   },function(){
    //滑開時移除divOver樣式
    $(this).removeClass('divOver'); 
   }
  );
 });
</script>
放在<body>.....</body>之間：
View Code HTML
1 2 3
<div class="divbox">div1</div>
<div class="divbox">div2</div>
<div class="divbox">div3</div>
　　從上方jQuery的程式碼來看，真的沒幾行，這邊梅干只是變換底色，若要再多點變化，各位可以作張底圖，直接變換底圖，看起來會更有變化，也會比較強眼。
[範例預覽]
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)