我想知道是否有方法在點擊後在css中更改按鈕的樣式,因此不是element:active
。 謝謝!點擊後的CSS更改按鈕樣式
5
A
回答
7
如果您正在尋找純CSS選項,請嘗試使用:focus僞類。
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
2
只有通過選擇按鈕的活動和焦點僞元素才能使用CSS。
button:active{
background:olive;
}
button:focus{
background:olive;
}
見codepen:http://codepen.io/fennefoss/pen/Bpqdqx
你也可以寫一個簡單的jQuery的點擊功能,改變背景顏色。
HTML:
<button class="js-click">Click me!</button>
CSS:
button {
background: none;
}
的JavaScript:
$(".js-click").click(function() {
$(".js-click").css('background', 'green');
});
看看這個codepen:http://codepen.io/fennefoss/pen/pRxrVG
3
什麼是你的代碼,但噸?如果它是一個標籤,那麼你可以這樣做:
a {
padding: 5px;
background: green;
}
a:visited {
background: red;
}
<a href="#">A button</a>
或者你可以使用jQuery添加一個類上點擊,如下圖所示:
$("#button").click(function() {
$("#button").addClass('button-clicked');
});
.button-clicked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
1
如果你的按鈕是一個<a>
元素,你可以使用:visited
選擇器。
但是,您是有限的,你只能改變:
- 顏色
- 背景色
- 邊框顏色(及其子屬性)
- 輪廓色
- 的顏色部分的填充和筆畫屬性
我還沒有閱讀this article about revisiting the :visited
但也許有些聰明的人發現了更多的方法來破解它。
7
每個環節有五個不同的狀態:link
,hover
,active
,focused
和visited
。
Link
是外觀正常,hover
是當你鼠標,active
是被點擊時的狀態,focused
如下積極visited
是你最終的狀態,當你在無焦點最近點擊鏈接。
我猜你想實現在任focus
或visited
不同的風格,那麼你可以添加以下的CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focused { #cc0; }
推薦的順序在你的CSS不會造成任何麻煩的是以下:
a
a:visited { ... }
a:focused { ... }
a:hover { ... }
a:active { ... }
您可以使用Web瀏覽器的開發者工具,迫使裝置的狀態是這樣的(鉻 - >開發工具/檢查元素 - >風格 - >篩選:HOV): Force state in Chrome Developer Tools
相關問題
- 1. 更改CSS樣式表按鈕點擊
- 2. 點擊後更改按鈕樣式
- 3. 按下後更改按鈕樣式 - CSS
- 4. Vaadin改變按鈕樣式後,點擊
- 5. 點擊Android按鈕更改樣式
- 6. 更改點擊動態按鈕的CSS
- 7. 更改HTML按鈕點擊CSS?
- 8. 點擊後更改按鈕圖像
- 9. 點擊按鈕後更改CulturalInfo
- 10. 如何在點擊按鈕時更改按鈕的Css類
- 11. 更改按鈕上的ASP.NET項目的CSS類在點擊代碼後點擊
- 12. 單擊按鈕更改元素CSS樣式
- 13. 更改按鈕樣式,如果點擊了Android的
- 14. 更改CSS樣式,當按鈕被點擊,但改回原來當另一按鈕被按下
- 15. SDK 13後更改了按鈕樣式
- 16. 如何在點擊後暫時改變Android按鈕樣式?
- 17. 點擊jquery更改按鈕
- 18. 使用javascript更改輸入按鈕樣式點擊
- 19. 導航按鈕點擊更改樣式效率
- 20. 點擊更改樣式
- 21. 更改按鈕樣式
- 22. 如何在點擊「添加」按鈕後更改答案按鈕?
- 23. css改變點擊元素的樣式
- 24. 按鈕樣式,css
- 25. CSS按鈕樣式
- 26. 點擊後仍保留css樣式
- 27. 通過更改按鈕樣式更改按鈕顏色
- 28. 按鈕點擊後如何更改一些代碼後的按鈕文本
- 29. iOS html5 css3按鈕點擊樣式
- 30. 樣式按鈕,點擊文字
你可以在這裏粘貼代碼和更多的解釋嗎? –
你可以添加一個jQuery函數來添加一個額外的類到點擊按鈕上 –