利用CSS hover偽類改變其他元素的總結

2022-05-04 13:54:12 字數 2127 閱讀 1575

:hover 偽類經常用於頁面的一些滑鼠互動、鏈結點選變化,增強頁面的使用者體驗,但是可以用來改變其他元素樣式,可以在不使用js 的情況下,達到想要的頁面效果。

1、hover改變自身的效果:

滑鼠懸浮改變樣式:

演示div

>

css

#yanshi

#yanshi:hover

2、hover改變子元素的樣式html

<

div

id="fir"

>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

<

div

class

="se"

>

div>

div>

css

#fir

#fir div

div#fir:hover .se

hover直接可以批量改變內部元素的樣式,這樣的效果很多用在產品的展示頁面,滑鼠懸浮在頁面的乙個元素上,不同的產品實現位移,達到很好的互動效果。重要的一點,hover在父元素上,對子元素進行樣式調整。

3、hover改變相鄰兄弟元素的樣式:(需要在hover之後新增「+」)

html不變,變化的css部分

#fir div:first-child:hover + .se
效果:

或者:

#fir div:hover +.se

可以看到,hover對兄弟元素改變樣式,只對相鄰的兄弟元素起作用。

4、hover改變後面兄弟元素的樣式:(需要在hover之後新增「~」)(根據@bugj提示)

2021.8.27更新:

實際上偽類也是css類,表示選中特定的元素,這些元素不通過class 、id選或者位置選定,而是通過滑鼠的行為選中對應元素,例如 hover,表示選中滑鼠指標浮動在上面的元素。然後再根據選中元素的位置定位其他元素,這樣就很好理解上述的四種示例。

1、第一種利用hover選中自身元素,再對該元素應用transition效果;

2、第二種利用hover選中自身元素,再利用後代選擇器選中後代元素;

3、第三種利用hover選中自身元素,再利用相鄰兄弟選擇器選中相鄰元素;

4、第四種利用hover選中自身元素,再利用兄弟選擇器選中後面兄弟元素。

偽類選擇器與普通class、id、位置選擇器使用,並無異同。

css hover偽類的使用

hover的使用,即當滑鼠指標移入元素時,所做出的樣式設定 doctype html html lang en head meta charset utf 8 title demo01 title style ul li ul li hover style head body ul li li li...

理解的偽類 偽元素

偽類 元素的狀態 屬性描述 active 向被啟用的元素新增樣式。focus 向擁有鍵盤輸入焦點的元素新增樣式。hover 當滑鼠懸浮在元素上方時,向元素新增樣式。link 向未被訪問的鏈結新增樣式。visited 向已被訪問的鏈結新增樣式。first child 向元素的第乙個子元素新增樣式。la...

偽類和偽元素的區別

個人的關注點可能主要集中在js方向上,但是本著css也不能丟掉的原則,所以上網查了些css方面的困惑點,這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看,如果需要新增新元素加以標識的,就是偽元素,反之,如果只需要在既有元素上新增類別的...