CSS中hover選擇器的使用詳解

2022-10-11 04:51:09 字數 842 閱讀 2468

有些時候需要用到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

css樣式:

CSS選擇器的使用

lang zh charset utf 8 常用選擇器title 內部樣式 1.元素選擇器,又稱為型別選擇器 h1 2.類選擇器,以 開頭,通過 class 屬性引用 class1 class2 3.id選擇器,以 開頭,通過 id 屬性引用 id1 4.後代選擇器 h4 p span 5.組合選擇...

CSS中的選擇器

1.關係選擇器 a.後代選擇器特點 父元素 子元素,中間是空格什麼都不加 b.兒子選擇器的特點 父元素 子元素,中間是 號 c.相鄰選擇器特點 元素 元素,中間用 號,但是兩者要為同一級才行 d.兄弟選擇器特點 元素 元素,兄弟元素中間用 號,必須要兩個為同一級 2.屬性選擇器 a.格式是標籤名 屬...

Css中的選擇器

常用的選擇器有如下幾種 1 標籤選擇器標籤選擇器,此種選擇器影響範圍大.舉例 div 2 id選擇器 html元素以id屬性來設定id選擇器,css 中 id 選擇器以 來定義。通過id名來選擇元素,元素的id名稱不能重複,所以乙個樣式設定項只能對應於頁面上乙個元素,不能復用,id名一般給程式使用,...