css實現商品封面圖向上浮動方法詳細講述

這篇文章講述了css如何實現商品封面圖觸摸向上浮動，不了解css如何實現商品封面圖觸摸向上浮動同學，我們一起來看看本篇文章吧！ 、

今天在寫CSS時需要實現：當滑鼠懸停在由圖片和介紹組成的超連結時，榴槤向上浮動的效果。

我在實作這個效果時思路分為以下幾個步驟：

• #滑鼠懸停

• 圖片移動

• 下方元素絕對定位

• 增加過渡時間

# #1.滑鼠懸停-增加偽類別選擇器：hover

#　　當滑鼠懸停時改變元素樣式，首先想到的是使用偽類選擇器:hover。在寫這裡的時候遇到的問題是，懸停在超連結上僅使圖片部分移動，而文字介紹部分不移動。因此在寫偽類別的時候不能寫成#id a:hover，而應在其後再加上圖片部分p的類別選擇器，即#id a:hover .class {}。這樣便能實現超連結懸停而僅移動圖片。

2.圖片移動-改變元素的margin/padding

　　要使得圖片移動，就是改變圖片的位置，使得懸停時圖片位置上移，那麼我們可以改變元素的margin或padding屬性，以達到移動目的

3.下方元素絕對定位

　　由於流的影響，圖片位置的移動會影響下面文字介紹和價格的位置，即整體均向上移動。為了使其留在原位，其位置應該改為絕對定位，不再贅述。

4.增加過渡時間-transition

　　為使過度不太生硬，需要增加transition屬性。但要注意的是，不提議在:hover中增加transition屬性，因為當滑鼠移開時，transition屬性便消失，這樣滑鼠移開時便顯得過於生硬。只要在需要移動的元素，例如上面的.class中直接加入transition屬性即可。

相關推薦：

關於css浮動元素的居中

頁面圖片浮動左右滑動效果的簡單實現案例

以上是css實現商品封面圖向上浮動方法詳細講述的詳細內容。更多資訊請關注PHP中文網其他相關文章！