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浮動元素的置中

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