CSS hover選擇器的使用詳解

2022-09-21 10:51:08 字數 839 閱讀 5495

有些時候需要用到mouseover和mouseout這兩個滑鼠事件,但是寫js又比較麻煩,還要新增監聽事件,所以能用css解決的東西盡量yongcss解決,這樣可以提高效能,下面說一下我對:hover 的了解:

之前在學計算機應用的時候,老師教我們使用了:hover選擇器來完成下拉列表,之前只知道怎麼使用,並不知道為什麼要這麼用,現在記下怎麼使用吧

定義和用法

定義::hover 選擇器用於選擇滑鼠指標浮動在上面的元素。

:hover 選擇器適用於所有元素

用法1:

這個表示的是:當滑鼠懸浮在a這個樣式上的時程式設計客棧候,a的背景顏色設定為黃色

a:hover

這個是最普通的用法了,只是通過a改變了style

用法2:

使用a 控制其他塊的樣式:

使用a控制a的子元素 b:

.a:hover .b

使用a控制a的兄弟元素 c(同級元素):

.a:hover + .c

使用a控制a的就近元素d:

.a:hover ~ .d

總結一下:

1. 中間什麼都不加  控制子元素;

2. 『+』 控制同級元素(兄弟元素);

3. 『~』 控制就近元素;

例項用乙個按鈕控制乙個盒子的運動狀態,當滑鼠移到按鈕上方時,盒子停止運動,滑鼠移開時,盒子繼續運動

body**:

stop

www.cppcns.comss="animation">

css樣式:

實現效果:

本文標題: css: hover選擇器的使用詳解

本文位址: /web/css/85552.html

CSS hover選擇器的使用

有些時候需要用到mouseover和mouseout這兩個滑鼠事件,但是寫js又比較麻煩,還要新增監聽事件,所以能用css解決的東西盡量yongcss解決,這樣可以提高效能,下面說一下我對 hover 的了解 之前在學計算機應用的時候,老師教我們使用了 hover選擇器來完成下拉列表,之前只知道怎麼...

CSS hover選擇器的使用詳解

hover選擇有很多種使用方式 a hover a hover b first child a hover b a hover c a hover c b style a 元素1 b 元素2div b 元素2div div c 元素3 b 元素2div div body html a hover a...

選擇器的使用

定義 使用css將樣式應用於特定的html元素,需要找到這個元素。在css中,執行這一任務的樣式規則部分稱為選擇器 selector 選擇器的介紹 p html h2html 中國佛教em 文化h1 op html id op 這是乙個選擇器的例子p op html class op 海賊王人物介紹...