利用css將一張圖製作成mouseover效果

同事James在製作網頁時,請他嘗試利用一張圖以CSS製作mouseover效果。



利用一張圖上半部製作onmouseout的效果下半部製作onmouseover的效果
在div中定義出欲顯示出來的總寬度與高度,並設定背景定義每一個選項li的寬度高度,並設定選項的連結只顯示區塊→#desk li a{display: block;}

mouseover的效果是利用負座標將圖片往上提,座標值就是剛剛設定每一選項li的寬度
另外選項要設成:浮動靠左,不然座標會錯亂→#desk li{float: left;}

其與法如下:
CSS:
#desk {
background-image: url(img/help_desk123.gif);
list-style-type: none;
height: 82px;
width: 343px;
}
#desk li{
float: left;
}
#desk li a{
display: block;
}
#desk1 a{
width: 120px;
height: 82px;
}
#desk2 a{
width: 105px;
height: 82px;
}
#desk3 a{
width: 118px;
height: 82px;
}
#desk1 A:hover{
background: url(img/help_desk123.gif) 0px -82px
}
#desk2 A:hover{
background: url(img/help_desk123.gif) -120px -82px
}
#desk3 A:hover{
background: url(img/help_desk123.gif) -225px -82px
}


HTML:
張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感