<!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使該元素自身改變新的樣式
<!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> <p class="container"> <p class="content"></p> </p></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> <p class="container"></p> <p class="content"></p></body></html>
以上樣本，當兩個元素不是父子關係，為同胞兄弟關係時，則通過 .container:hover .content這樣的寫法是無效的，則需要通過“+”號，即 .container:hover +.content才能顯示出效果；但是要注意兩個元素的先後順序哦~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
