鼠标悬停,背景颜色变化问题
程序员文章站
2023-11-17 15:17:28
实例代码: 同理可应用在超链接、按钮等中 ......
实例代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px; width: 1000px; } .btn{ display: inline-block; padding: 0 30px; width: auto; height: 35px; font: 14px/35px 'microsoft yahei'; color: #fff; border: 0; border-radius: 3px; text-align: center; cursor: pointer; /*实现渐变(时间变化效果)*/ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .bluebtn{ background: #5dcbff; } /*蓝色按钮*/ .bluebtn:hover{ background: #40b6ee; } .orangebtn{ background: #ff5700; }/*橙色按钮*/ .orangebtn:hover{ background: #e25d18; } .violetbtn{ background: #6680ff; }/*紫色按钮*/ .violetbtn:hover{ background: #425de0; } .graybtn{ background: #999; }/*灰色按钮*/ .graybtn:hover{ background: #7f7f7f; } </style> </head> <body> <div class="container"> <span class="btn bluebtn">蓝色按钮</span> <span class="btn orangebtn">橙色按钮</span> <span class="btn violetbtn">紫色按钮</span> <span class="btn graybtn">灰色按钮</span> </div> </body> </html>
同理可应用在超链接、按钮等中
推荐阅读
-
鼠标悬停,背景颜色变化问题
-
Android实现状态栏和虚拟按键背景颜色的变化实例代码详解
-
[Mac开发]自定义NSTableView鼠标悬停改变行的背景颜色Objective-C实现
-
Android 软键盘在有scollview,纵向viewpager+recyclview实现列表,或者recyclview, 把布局顶上去的问题,保证背景不会发生变化
-
设置Android通知栏Notification的字体/图标颜色随背景色变化而变化
-
鼠标悬停,背景颜色变化问题
-
背景图片与背景颜色的问题_html/css_WEB-ITnose
-
JS弹窗DIV并整背景颜色变化
-
背景图片与背景颜色的问题_html/css_WEB-ITnose
-
javascript实现随时变化着的背景颜色_javascript技巧