我想知道是否有方法在点击后在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函数来添加一个额外的类到点击按钮上 –