css hover偽類的使用

2021-09-26 19:40:58 字數 2177 閱讀 3062

: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>

li>

<

li>

li>

ul>

body

>

html

>

以上情況存在於當滑鼠指標移入元素,通過:hover使該元素自身改變新的樣式

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>demo01

title

>

<

style

>

*.container

.content

.container:hover .content

style

>

head

>

<

body

>

<

div

class

="container"

>

<

div

class

="content"

>

div>

div>

body

>

html

>

以上示例中,當存在父子關係的時候,可以通過父級的:hover使得子級的樣式發生改變,寫法為.container:hover .content,hover後面有乙個空格;但是,子級:hover改變不了父級的樣式

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>demo01

title

>

<

style

>

*.container

.content

.container:hover .content

style

>

head

>

<

body

>

<

div

class

="container"

>

div>

<

div

class

="content"

>

div>

body

>

html

>

以上示例,當兩個元素不是父子關係,為同胞兄弟關係時,則通過.container:hover .content這樣的寫法是無效的,則需要通過「 」號,即.container:hover .content才能顯示出效果;但是要注意兩個元素的先後順序哦~

不足之處,請多多指教…

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

hover 偽類經常用於頁面的一些滑鼠互動 鏈結點選變化,增強頁面的使用者體驗,但是可以用來改變其他元素樣式,可以在不使用js 的情況下,達到想要的頁面效果。1 hover改變自身的效果 滑鼠懸浮改變樣式 演示div css yanshi yanshi hover 2 hover改變子元素的樣式ht...

偽類的使用

優點 1.不會增加js的dom負擔 2.不會增加瀏覽器對html的解析,加快瀏覽器載入html 3.對seo很有幫助 注意 img input 不能有偽類 表單 focus 事件的使用 input focus div invalid 配合h5正則表單驗證 input type email inval...

clear偽類使用

都知道float會脫離文件流 用什麼辦法撐開父元素呢?手動在本區塊的所有float元素之後加上乙個塊元素並對其新增clear both 可以 但是這樣還要再去修改html頁面 而且多了乙個僅僅是為了控制布局卻沒有實際表現意義的元素 不好.將float的父元素也設定為float 這樣會導致更深的問題 ...