CSS中,我们可以通过鼠标点击来改变元素的样式。这主要通过使用伪类(:active)实现。.btn { background-color: #007bff; color: #fff; padding:
CSS中,我们可以通过鼠标点击来改变元素的样式。这主要通过使用伪类(:active)实现。
.btn { background-color: #007bff; color: #fff; padding: 10px; border-radius: 5px; } .btn:active { background-color: #0062cc; }
上面的代码展示了一个按钮元素的样式定义,当我们点击这个按钮时,它的背景色会从#007bff变成#0062cc。这是因为我们在.btn类中定义了:active伪类,它会覆盖默认状态下的样式。
除了改变背景色,我们还可以改变其他样式,比如字体颜色、边框等。
.btn { background-color: #007bff; color: #fff; padding: 10px; border-radius: 5px; border: none; } .btn:active { background-color: #0062cc; color: #fff; border: 1px solid #0062cc; }
上面的代码展示了一个带有边框的按钮元素。当我们点击按钮时,它的边框会从无变成1px的蓝色实线边框。
通过使用伪类,我们可以实现更丰富的交互效果,给用户更好的体验。同时,我们也要注意到,伪类只在元素处于对应状态时才生效,如按钮需要被点击才能改变样式。
粉丝
0
关注
0
收藏
0