CSS 按钮悬停样式
button 按钮悬停样式
button定义的按钮的悬停样式,可以通过CSS中的:hover伪类选择器来进行匹配选择处于鼠标悬停状态的按钮,然后设置相关的按钮的样式,比如大小、背景颜色等等。比如下方实例的试一试按钮的悬停的背景色样式可以从原来的skyblue转换为blue,呈现出一个动态的过程。
语法
buttonSelect:hover{样式设置}
提示:buttonSelect为一个CSS的选择器,可以是元素选择器、类选择器、id选择器等等,用于选择button元素。
按钮悬停样式实例代码,及在线编辑器
下方实例在线运行之后,鼠标悬停与按钮之上,将改变按钮的大小和背景颜色:
<button id='b1'>按钮</button>
<style>
#b1{padding:2%;}
#b1:hover{background-color:skyblue;padding:5%;}
</style>