css3實現滑鼠懸浮 顯示 隱藏

2021-10-08 02:51:56 字數 2674 閱讀 8330

以前我們總是通過js去實現一些簡單的隱藏和顯示 自從前後端開始分離後更多人把這些能用css實現的東西 放在了前端 如賬號密碼的判斷等

現在我們有這樣的**

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

屬性選擇器

lorem ipsum dolor sit amet.

quia modi nihil saepe labore.

placeat vero commodi ab incidunt?

repellendus eum error adipisci quod?

repudiandae ipsam iusto dolor dicta?

animi quae ut explicabo quibusdam.

quisquam sapiente dignissimos voluptas iusto.

aperiam qui enim at reprehenderit!

suscipit, commodi quibusdam. nemo, ipsum!

repellat adipisci voluptatum hic reprehenderit.

quo est dolores et commodi?

eum asperiores quae eligendi illum?

pariatur impedit quisquam illum sint.

aut nostrum tenetur illum repudiandae.

ducimus quam quasi odio officia.

deserunt aliquam molestiae at tenetur?

voluptates iusto quaerat ipsum adipisci.

saepe debitis perspiciatis ducimus esse!

in omnis itaque cupiditate ab.

necessitatibus dicta neque officiis alias.

現在的需求就是滑鼠懸浮上去隱藏下乙個li標籤

那我們要怎麼做呢?

這就要涉及到css的乙個兄弟選擇器 +

在**中加入

這樣當我們hover當前項的時候 就隱藏了下一項

紅色箭頭是滑鼠懸浮的位置

這樣我們就實現了乙個簡單的顯示及隱藏雖然沒啥用

全部**

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

屬性選擇器

ul li:hover+li

lorem ipsum dolor sit amet.

quia modi nihil saepe labore.

placeat vero commodi ab incidunt?

repellendus eum error adipisci quod?

repudiandae ipsam iusto dolor dicta?

animi quae ut explicabo quibusdam.

quisquam sapiente dignissimos voluptas iusto.

aperiam qui enim at reprehenderit!

suscipit, commodi quibusdam. nemo, ipsum!

repellat adipisci voluptatum hic reprehenderit.

quo est dolores et commodi?

eum asperiores quae eligendi illum?

pariatur impedit quisquam illum sint.

aut nostrum tenetur illum repudiandae.

ducimus quam quasi odio officia.

deserunt aliquam molestiae at tenetur?

voluptates iusto quaerat ipsum adipisci.

saepe debitis perspiciatis ducimus esse!

in omnis itaque cupiditate ab.

necessitatibus dicta neque officiis alias.

CSS3按鈕滑鼠懸浮光圈效果

html 超文字標記語言 是網頁的核心 首先你要學會,不要害怕,html很容易學習的,剛開始多記多練,但是到最後還是要自己深入專研,簡單的入門是很快,但學好html是成為web開發人員的基本條件。學習資源 html dog html入門指南 w3c html學習教程 通過使用 css 來提公升工作效...

滑鼠懸停顯示CSS3動畫邊框

效果體驗 以下是 1 doctype html 2 html xmlns 3 head 4 meta charset utf 8 5 title css3滑鼠懸停顯示動畫邊框 柯樂義 title base target blank 6 link href type text css rel styl...

CSS3實現滑鼠hover的過渡效果

我想讓滑鼠放在div上就讓它旋轉變大,離開div後它又恢復本來的樣子。於是我就想寫乙個js,監聽乙個hover事件,當hover發生的時候,觸發乙個計時器,在計時器裡寫兩個值,乙個管角度,乙個管寬度,隨著時間的變化逐漸增加,不斷地重寫div的style。當達到我期望的limit的值後讓它停止 或者乾...