html中的hover的作用，hover在css中的用法
阿新 • • 發佈：2021-11-21
：hover的定義和用法
:hover 選擇器用於選擇滑鼠指標浮動在上面的元素。
:hover 選擇器適用於所有元素
用法1：
這個表示的是：當滑鼠懸浮<div>上時<div>變顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 25px; height: 25px; background: #3388ff; } div:hover{ background: red; } </style> </head> <body> <div></div> </body> </html>
用法2：
這個表示的是當滑鼠點選最大<div>時它的同級，子代和後代都變顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{width: 300px;height: 300px;background: red} #div1:hover{background: black} #div2{width: 100px;height: 100px; background: green} #div1:hover>#div2{ background: blue; } #div3{ width: 50px; height: 50px; background: pink; } #div1:hover #div3{ background: yellow; } #div4{width: 200px;height: 200px;background: lightcoral} #div1:hover+#div4{ background: lightgreen; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <div id="div4"></div> </body> </html>