css:hover狀態改變另一個元素樣式的使用
阿新 • • 發佈：2021-08-19
<!DOCTYPEhtml>
<html>
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>css:hover狀態改變另一個元素樣式的使用</title> <style> .box{ width:150px; height:150px; background-color:#069; line-height:150px; text-align:center; margin:20px0; color:#FFF;
.change{ font-size:20px; color:#0cf; }
/*情景一：兩個是兄弟元素*/
.box:hover+.change{ color:red; }
/*情景二：兩個是父子元素*/
.box:hover.change{ color:red; }
/*情景二：兩個是兄弟元素,改變的是一個兄弟元素的子元素*/
.box:hover+#c>.change{ color:red; } </style> </head>
<body> <!--情景一：兩個是兄弟元素--> <divclass="box"></div>
</html>
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>css:hover狀態改變另一個元素樣式的使用</title> <style> .box{ width:150px; height:150px; background-color:#069; line-height:150px; text-align:center; margin:20px0; color:#FFF;
.change{ font-size:20px; color:#0cf; }
/*情景一：兩個是兄弟元素*/
.box:hover+.change{ color:red; }
/*情景二：兩個是父子元素*/
.box:hover.change{ color:red; }
/*情景二：兩個是兄弟元素,改變的是一個兄弟元素的子元素*/
.box:hover+#c>.change{ color:red; } </style> </head>
<body> <!--情景一：兩個是兄弟元素--> <divclass="box"></div>
</html>