Javascript, 網頁設計

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

梅干2010/02/03
梅問題-jQuery教學-滑鼠滑入變換Div區塊中的底色
  最近各位若有到梅干的一起愛寶貝購物網,應該會發現到,當滑鼠滑入下方的產品區塊中,該區塊就會自動的變換底色,如此一來使用者就可輕意知道,目前滑鼠所選取到的產品為何, 其實製作方法相當簡單,透過jQuery先取得滑鼠目前所選到區塊,再把該區塊要變換的樣式套上去,就大功告成囉!

放在<head>.....</head>之間:
#css
/* 預設樣式 */.divbox{ 
  height:300px;
  width:200px;
  background:#ffffff;
  border:solid 1px #ccc;
  float:left;
  margin-right:10px;
 }

/*  滑入時變換底色樣式 */  
.divOver{
 background:#eff8fe;
border:solid 1px #d2dce3;
} 

#javascript
<script src="https://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>之間:
#html
<div class="divbox">div1</div>
<div class="divbox">div2</div>
<div class="divbox">div3</div>

  從上方jQuery的程式碼來看,真的沒幾行,這邊梅干只是變換底色,若要再多點變化,各位可以作張底圖,直接變換底圖,看起來會更有變化,也會比較強眼。
[範例預覽]
UAG軍規iPhone防摔殼