首頁 >web前端 >css教學 >css實現商品封面圖向上浮動方法詳細講述

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

韦小宝
韦小宝原創
2018-03-14 12:53:412976瀏覽

這篇文章講述了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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn