洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營銷規(guī)律
作者:狐靈科技 | 2020-02-06 20:27 |點擊:
:hover的使用,即當(dāng)鼠標(biāo)指針移入元素時,所做出的樣式設(shè)置
<!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>
以上情況存在于當(dāng)鼠標(biāo)指針移入元素,通過: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 class="content"></div> </div> </body> </html>
以上示例中,當(dāng)存在父子關(guān)系的時候,可以通過父級的:hover使得子級的樣式發(fā)生改變,寫法為 .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>
以上示例,當(dāng)兩個元素不是父子關(guān)系,為同胞兄弟關(guān)系時,則通過 .container:hover .content這樣的寫法是無效的,則需要通過“+”號,即 .container:hover +.content才能顯示出效果;但是要注意兩個元素的先后順序哦~
不足之處,請多多指教…