今天是一個css3類比jq點擊事件,因為我發現,css3中沒有類似於,js的點擊事件,那麼,可不可以仿照
jq的效果,類似的做一個呢?主要用到,input裡面的radio 選項按鈕,然後後面跟一個a標籤,讓radio覆蓋在a上,那為什麼不直接
把 a放在radio上面呢?因為選取器 + 好選擇嘛,用radio的功能,a來修飾按鈕樣式,再把radio 隱藏,這裡要用opacity(透明度)
這就是,主要原理!
上視圖吧
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .fd{ width: 100%; height: 100px; margin-top: 200px; position: fixed; } input,a{ width: 33.33%; height: 100px; position: absolute; font-size: 30px; font-weight: 700; cursor:pointer; } a{ display: block; color: #000; text-align: center; line-height: 100px; z-index: 10;/*要覆蓋嘛,當然需要層級關係*/ border-radius: 20px; } input{ z-index: 100;/*要覆蓋嘛,當然需要層級關係*/ opacity:0; } input:checked + a{ background: rgba(0,0,0,0.5); } #a1,#a1+a{ left: 0%; } #a2,#a2+a{ left: 33.33%; } #a3,#a3+a{ left: 66.66%; } </style></head><body><!--選項按鈕的時候,name要統一原理就是,把input覆蓋在a上,然後再把input透明度為0隱藏;然後,按鈕的樣式由a標籤來控制。input上,a下,是因為;選取器 + 容易選到。--><p class="fd"><input type="radio" name="單選" id="a1" /><a href="#">css</a><input type="radio" name="單選" id="a2" /><a href="#">html</a><input type="radio" name="單選" id="a3" /><a href="#">javascript</a></p></body></html>