css3 - 純css實(shí)現(xiàn)點(diǎn)擊特效
問題描述
怎么用純css實(shí)現(xiàn)和按鈕一樣的點(diǎn)擊一次，然后改變樣式？聽說是用偽元素target，不過我不知道怎么操作
問題解答
回答1：<style> #select{display:none; } .box{width:100px;height:100px;border:1px solid red;display:none; } #select:checked + .box{display:block; }</style><label for='select'>點(diǎn)我！</label><input type='checkbox' id='select'><p class='box'>盒子</p>
也可以看一下這篇文章：CSS實(shí)現(xiàn)點(diǎn)擊事件及實(shí)踐http://www.cnblogs.com/pssp/p...
回答2：點(diǎn)擊過的鏈接可以 :visited 。
回答3：visited的方法前面的小伙伴已經(jīng)講了；那我還是幫你搞懂偽元素 target 的用法吧。學(xué)東西畢竟得踏踏實(shí)實(shí)，搞懂想要的再去學(xué)新的。:target偽選擇器指定的ID匹配上時(shí)，它的樣式就會(huì)在這個(gè)ID元素上生效。
HTML:
<h1 id='section1'>Section 1</h1>
CSS:
:target { color: #afafaf;}h1:target { color: #f00;}
ID為”section1″的元素將會(huì)變紅.
回答4：<!DOCTYPE html><html> <head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>RunJS</title> <script type='text/javascript' src='http://www.aoyou183.cn/js/sandbox/other/CanvasText-0.4.1.js'></script><style>p{color:#fff;height:80px;width:220px;background-color:#abcdef;line-height:80px;text-align:center;}a:visited>p{ background:#000;}</style> </head> <body><a href='http://www.aoyou183.cn/wenda/5745.html#' >我是一個(gè)連接<p> 我是一個(gè)p</p></a> </body></html>
像這樣用visited然后可以控制a的子元素的樣式，+選擇器不支持，只支持hover、active。回答5：
貌似沒有類似jquery的toogleClass(不記得拼寫了)的功能吧，不過，倒是input有個(gè)checked屬性。你可以使用兄弟選擇器來設(shè)置，比如input+label和input:checked+label來區(qū)分，但是，這個(gè)明顯和你說的也不太一樣，這個(gè)其實(shí)是通過獲取焦點(diǎn)和失去焦點(diǎn)來判斷的。實(shí)在不行就用JS吧
回答6：現(xiàn)在css只有hover visited 才能監(jiān)聽到鼠標(biāo)滑動(dòng)過的事件 要是點(diǎn)擊改變樣式 一般只能結(jié)合js來實(shí)現(xiàn)
回答7：jquery 的slideToggle
相關(guān)文章：
1. android-studio - Android Studio 運(yùn)行項(xiàng)目的時(shí)候一堆警告，跑步起來！？2. dockerfile - [docker build image失敗- npm install]3. mysql - 新浪微博中的關(guān)注功能是如何設(shè)計(jì)表結(jié)構(gòu)的？4. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。5. 如何解決Centos下Docker服務(wù)啟動(dòng)無響應(yīng)，且輸入docker命令無響應(yīng)？6. angular.js - 關(guān)于$apply()7. MySQL數(shù)據(jù)庫中文亂碼的原因8. 表單提交驗(yàn)證，沒反應(yīng)，求老師指點(diǎn)9. nignx - docker內(nèi)nginx 80端口被占用10. angular.js - Ionic 集成crosswalk后生成的apk在android4.4.2上安裝失敗？？？
網(wǎng)公網(wǎng)安備