仿163邮箱鼠标放上变色的按钮样式

最新推荐文章于 2022-03-13 17:21:21 发布
最新推荐文章于 2022-03-13 17:21:21 发布
阅读量1.6k 收藏
点赞数
分类专栏： Web前端 文章标签： button border xhtml url input class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Omarix/article/details/6541057
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163邮箱鼠标放上变色的按钮样式</title>
<style>
.btn02 { width:60px; height:24px; border:1px solid #87a3c1; background:url(/uploadfile/200911/11/1632433537.gif); color:#555; font-size:12px; line-height:180%; cursor:pointer;}
.btn04 { width:60px; height:24px; border:1px solid #a2904d; background:url(/uploadfile/200911/11/1632433537.gif)　0　-66px; color:#630; font-size:12px; cursor:pointer; line-height:180%;}
</style>
</head>

<body>
<p>
  <input name="button2" type="reset" class="btn02" οnmοuseοver="this.className='btn04'" οnmοuseοut="this.className='btn02'"  id="button2" value="重置" />
</p>
<p>鼠标放到按钮上试试</p>
</body>
</html>

Omarix
关注
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6387
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
6款漂亮HTML CSS样式用户留言表单
下雨天__的专栏
07-17 4557
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。 标记 首先我们要在网页中加上
鼠标放在按钮上变色 html,鼠标指住(hover)变色的按钮演示demo
weixin_39846089的博客
06-04 441
仿163邮箱鼠标放上变色的按钮样式www.mb5u.com .btn02 { width:60px; height:24px; border:1px solid #87a3c1; background:url(/uploadfile/200911/11/1632433537.gif); color:#555; font-size:12px; line-height:180%; cursor:p...
JavaScript实用范例词典04-14
03-31
6.17 鼠标移上去后改变文字的样式... 168 6.18 让浏览者自己选择网页文字的 大小... 168 6.19 让浏览者自己选择网页文字的 颜色... 169 6.20 动态缩放文字... 170 6.21 隐藏显示文字... 171 6.22 鼠标移上时...
JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap
qq_40850871的博客
11-16 1027
四、jQuery基础 1.jQuery介绍 jQuery由美国人John Resig（约翰·莱西格）于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 它的设计思想是write less,do more 实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码 $("tr:even").css("background-color","#ccc"); 1.1 jQuery能做什么? 访问和操作DOM元素 控制页面样式
JavaScript笔记
shine_my的博客
03-13 3272
JavaScript笔记
Div层随滚动条移动
热门推荐
雪飘过海
06-22 1万+
New Document window.onscroll=function(){ var oDiv=document.getElementById("d"); oDiv.style.top=document.body.scrollTop + 300;  //控制上下位置oDiv.style.left = document.body.scrollLeft + 300; //控制横向位置} as
带横向滚动条的表格
雪飘过海
07-06 4670
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body {background-color: #F0F0F0 ;  fo
JS+DIV表单实例——鼠标移上背景变色和文字提示
雪飘过海
06-13 1715
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">JS+CSS实现的一种交互体验@charset "utf-8";/*元素初始值*/html {background: #FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
带滚动条的下拉表格
雪飘过海
06-24 1566
 ==================================================================http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body {background-color: #F0F0F0 ;  font:
网页上的点击弹出层代码，居中显示
雪飘过海
08-26 1508
点击弹出层特效代码，网页上已经有很多类似的代码了，使用挺广泛的，代码先判断浏览器的版本，ie6创建的div样式和非ie6创建的div样式在解析时有点区别，为了兼容性考虑，才加了判断，虽然实现的有点粗糙，不过从实现的方法来说，容易理解，便于修改完善。 点击弹出
两个常用的DIV弹出层效果代码
雪飘过海
08-26 906
有时候我们想让div遮挡整个页面，页面可能出现滚动条，也可能不出现，页面有可能是html或者xhtml，这个方法可以通杀这些情况，而且根据你的要求，是盖整个页面，或者可视部分，在兼容性方面支持ie6-8、ff3.0-3.6、chrome、safari……浏览器等。
JS宝典学习笔记
雪飘过海
06-20 854
1.document.write(); 输出语句2.JS中的注释为1.//2./*...*/3.传统的HTML文档顺序是document-html-(head,body)4.一个浏览器窗口中的DOM顺序是window-(navigator,screen,history,location,document)5.得到表单中元素的名称和值document.getElementById(表单中元素的ID号
新浪的网页背景特效，可以关闭不显示
雪飘过海
08-26 767
新浪的网页背景特效，可以关闭不显示 if(typeof(sina)!="object"){var sina={}} sina.$=function(i){if(!i){return null} return document.getElementById(i)};var
网罗~~~~
雪飘过海
09-11 664
网罗天下~~~~~~~ JQuery--ZTree插件      http://www.baby666.cn 创意~~时尚元素 书签网站           http://www.chouti.com 登录界面
html鼠标放在按钮上变色
最新发布
01-11
在 HTML 中，可以使用 `:hover` 伪类来设置鼠标放在按钮上时的样式。例如，可以将按钮的背景色设置为红色： ```css button:hover { background-color: red; } ``` 在 HTML 代码中，可以在按钮元素中使用 `style` 属性来应用上述样式： ```html <button style="color: blue;">Click me</button> ``` 当鼠标放在按钮上时，按钮的背景色将会变为红色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值