【CSS LAYOUT】設定onMouse樣式之position做法

在一開始接觸網頁設計這領域時，

學到的 onMouse 樣式多半是以兩張底圖做切換的做法。

也就是說在CSS語法中，原本底圖為1，在onMouse 時在吃一張底圖作為切換樣式做法。

後來，有在其他網站上看到這篇文章皆下來要介紹的position做法。

由於目前在研習【CSS LAYOUT】這本書

書裡範例剛好有講到設定onMouse樣式之position做法

會的人也許覺得這沒甚麼好講的，不過我還是在這邊為自己記錄一下。



---------------------------------------CSS---------------------------------------






------------------------------------------------------------------------------


2.設定onMouse樣式之position做法
在a元素中，加入background-image屬性和background-position屬性。
讓 a 的狀態下顯示是對齊圖片左上角顯示，
而 :hover假類別時，改變background-position屬性，讓圖片對齊右上角顯示。


------------------------------------------------------------------------------
如此一來，用一張底圖就可以作為 onMouse 切換的樣式。