用事件与CSS改变按钮不同状态下的颜色
目标效果:
表单的群发按钮,在鼠标悬停时为深蓝色,鼠标离开时为淡蓝色。
HTML代码:
<button id="submitBtn" class="btn" onmouseover="this.className='input_move'" onmouseout="this.className='input_out'" type="submit" tabindex="6">群 发</button>
<button id="previewBtn" class="btn" onmouseover="this.className='input_move'" onmouseout="this.className='input_out'" type="submit" tabindex="6">预 览</button>
CSS代码:
.btn{
color:#ffffff;
background:#44b549;
padding-top:3px;
border-top: 1px solid #44b549;
border-right: 1px solid #44b549;
border-bottom: 1px solid #44b549;
border-left: 1px solid #44b549;
width:100px;
height:30pt;
font-size:15pt;
border-radius:3em;
background-image: linear-gradient(to bottom, #44b549 0px, #44b549 100%);
-moz-border-radius: 5px;
} 注意一定不能少了这一段,此段定义打开页面时按钮的初始样式。若没有这段,页面打开时按钮不显示样式,直至有鼠标悬停。
.input_move{
color:#ffffff;
background:#006600;
padding-top:3px;
border-top: 1px solid #006600;
border-right: 1px solid #006600;
border-bottom: 1px solid #006600;
border-left: 1px solid #006600;
width:100px;
height:30pt;
font-size:15pt;
border-radius:3em;
background-image: linear-gradient(to bottom, #006600 0px, #006600 100%);
-moz-border-radius: 5px;
}
.input_out{
color:#ffffff;
background:#44b549;
padding-top:3px;
border-top: 1px solid #44b549;
border-right: 1px solid #44b549;
border-bottom: 1px solid #44b549;
border-left: 1px solid #44b549;
width:100px;
height:30pt;
font-size:15pt;
border-radius:3em;
background-image: linear-gradient(to bottom, #44b549 0px, #44b549 100%);
-moz-border-radius: 5px;
}
用事件与CSS改变按钮不同状态下的颜色的更多相关文章
- 改变按钮在iPhone下的默认风格
-webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用"appearance"属性,来改变任何元素的浏览 ...
- UIButton在Disabled状态下标题混乱的问题
最近开发中遇到的问题汇总 有段时间没有归纳开发中遇到的一些问题了,今天就写一下之前开发中遇到的几个问题.希望这 篇文章能让读者在以后的开发中少走弯路.本文将依次介绍<UIButton在Disab ...
- ios UIButton设置高亮状态下的背景色
一,通过按钮的事件来设置背景色 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - (void)viewDidLoad { [ ...
- UITabBar 设置选中、未选中状态下title的字体颜色
一.如果只是设置选中状态的字体颜色,使用 tintColor 就可以达到效果 self.tabBar.tintColor = [UIColor redColor]; 二.但如果要将未选中状态和选中状 ...
- css中按钮的四种状态
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...
- android 中怎么保存当前按钮的状态?就是退出后重新进入还是上一次离开的状态
比如当前Activity中有一个按钮目前是开启,点击后按钮的text变成关闭!然后退出该Activtity,然后重新打开该Activity后当前按钮的状态还是关闭呢? 就是设置一个状态flag.fla ...
- xcode UIButton创建、监听按钮点击、自定义按钮 、状态 、内边距
代码创建 //创建UIButton UIButton * btnType=[[UIButton alloc]init]; //设置UIControlStateNormal状态下的文字颜色 [btnTy ...
- AngularJS进阶(十)AngularJS改变元素显示状态
AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
- CSS改变插入光标颜色caret-color简介及其它变色方法(转)
一.CSS改变输入框光标颜色的原生属性caret-color CSS caret-color属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色. 例如: input { color: ...
随机推荐
- Wordpress 音频播放器 Wordpress audio player with jQuery audioplayer.swf
原文地址:http://justcoding.iteye.com/blog/545978 Wordpress audio player with jQuery How to use Wordpress ...
- 协方差cov
摘录wiki如下(红色字体是特别标注的部分): http://zh.wikipedia.org/wiki/%E5%8D%8F%E6%96%B9%E5%B7%AE 协方差 协方差(Covariance) ...
- 经典CSS颜色混合模式
转自:http://www.webhek.com/css-blend-mode/ 注意:只有使用最新版的谷歌浏览器.火狐浏览器,才能正确的显示本文中的演示. Photoshop里最没有用处的一种功能— ...
- 网易云课堂_C语言程序设计进阶_期末考试编程题部分
1 字符串循环右移(5分) 题目内容: 输入一个字符串和一个非负整数N,要求将字符串循环右移N次. 输入格式: 输入在第1行中给出一个字符串,以'#'表示结束,‘#’不是字符串的一部分,字符串的长度未 ...
- c++崩溃错误2
使用了内联函数: 在头文件中声明和定义内联函数是正确的 但是在头文件中声明内联函数,而在.cpp文件中定义了内联函数会导致崩溃的 .h class stu{ inline void str(): } ...
- IOS中的几中观察监听模式
本文介绍Objective C中实现观察者模式(也被称为广播者/监听者.发布/注册或者通知)的五种方法以及每种方法的价值所在. 该文章将包括: 1 手动广播者和监听者(Broadcaster and ...
- Java File类读取文件属性
package myjavademo;import java.io.*; publicclass MyJavaDemo { public static void main(String[] ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- C# 中的委托和事件详解
C# 中的委托和事件 文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错 ...
- C++中的namespace
本文转载来自:http://blog.csdn.net/yao_zhuang/article/details/1853625 namespace中文意思是命名空间或者叫名字空间,传统的C++只有一个全 ...