:hover的使用,即當鼠標指針移入元素時,所作出的樣式設置html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } ul li{ width: 300px; margin-top: 10px; background: #ff0000; } ul li:hover{ background: #000000; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
以上狀況存在於當鼠標指針移入元素,經過:hover使該元素自身改變新的樣式spa
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; border: 1px solid #ff9f5a; } .content{ width: 100px; height: 100px; background: #27e7ff; } .container:hover .content{ background: #000000; } </style> </head> <body> <div class="container"> <div class="content"></div> </div> </body> </html>
以上示例中,當存在父子關係的時候,能夠經過父級的:hover使得子級的樣式發生改變,寫法爲 .container:hover .content,hover後面有一個空格;可是,子級:hover改變不了父級的樣式指針
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; border: 1px solid #ff9f5a; } .content{ width: 100px; height: 100px; background: #27e7ff; } .container:hover +.content{ background: #000000; } </style> </head> <body> <div class="container"></div> <div class="content"></div> </body> </html>
以上示例,當兩個元素不是父子關係,爲同胞兄弟關係時,則經過 .container:hover .content這樣的寫法是無效的,則須要經過「+」號,即 .container:hover +.content才能顯示出效果;可是要注意兩個元素的前後順序哦~
code
不足之處,請多多指教…htm