Hover偽類實用特效

2021-09-09 09:05:06 字數 1694 閱讀 6431

一、文字偽類bug解決辦法

在文字下面設定滑鼠移入出現下劃線的時候,通常會發現下劃線出現了但文字卻有向上移動的現象。這是因為文字與底部之間被有厚度的下劃線填充所造成的,「文字與底部的距離+下劃線的厚度」文字就會向上移動。

只需要設定同樣厚度的上邊框就可以抵消對文字的影響,同時上邊框需要和背景顏色相同,這樣就可以達到隱藏的效果。

.twotop4 span:nth-of-type(1):hover
二、.滑鼠移入散開特效

通過定位設定層疊在一起,隱藏後面需要展示的。

收起效果

hover展開效果

更換hover樣式顯示層疊效果

.sim-anim      

.sim-anim img

.sim-anim:hover img

.sim-anim:hover img:nth-child(1)

.sim-anim:hover img:nth-child(2)

.sim-anim:hover img:nth-child(3)

.sim-anim:hover img:nth-child(4)

.sim-anim:hover img:nth-child(5)

.sim-anim:hover img:nth-child(6)

.sim-anim:hover img:nth-child(7)

.sim-anim:hover img:nth-child(8)

.sim-anim:hover img:nth-child(9)

實現的效果

三、滑鼠移入手風琴式顯示導航框效果

樣式設定完成後,將元素向左移動隱藏需要的部分transform:translatex(110px);,用hover給標籤恢復顯示transform:translatex(0px);。

隨後給每乙個標籤都設定延遲時間,錯開延遲時間就可以達到想要的效果。

實現效果:

**樣式

廣書籤切換

州幻燈片

網滾動-gg

上滾動-cc

訂無縫滾動g

餐無縫滾動c

系滾動-gg

統滾動-cc

導滾動-uu

航滾動-nn

11常用導航【v2.1】

12手風琴【v2.2】

t1其他基礎效果

主主題網

特效 hover向上翻轉效果

前段時間做了很多有關css3動畫的專案。雖然當時都較圓滿的完成了,但事後還是要總結一下的,趁著近期工作不忙,系統的學習了一些動畫理論,重點看了transform3d變換,學習了translate平移 scale縮放 rotate旋轉 並實踐了perspective透視屬性的作用在 在 上瀏覽了一些動...

css3 hover新增特效

body demo demo hover style class demo div 此效果可以改變滑鼠移入目標區域上的hover效果,缺點 滑鼠移出區域還原之前效果時,沒有過度效果,很生硬 改善此效果參看方法二 如下 body demo demo hover style class demo div...

IE中偽類 hover的使用及BUG

hover 是我們在 css 設計中最常運用的偽類之一,許多絢麗效果的實現離不開偽類 hover,比如我們常見的純 css 選單 相簿效果等等。或許用了這麼久的偽類 hover,還有部分朋友還不完全了解 hover 的規則 在 css1 中此偽類僅可用於 a 物件。且對於無 href 屬性 特性 的...