css 鼠标移动到按钮图片改变

转载 (原文地址) sunmiy 随笔 css 2476阅读 2011-01-18 14:55:55 举报

<span .="Apple-.-span" .="line-height: 19px; font-size: 13px; font-family: verdana, 'ms song', 宋体, Arial, 微软雅黑, Helvetica, sans-serif; "><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">在网上发现了很多的方法,有的是用js,这里用了一个比较简单的css的方法,很实用</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;html&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;head&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;title&gt;无标题文档&lt;/title&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;style&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.pp a</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">{&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  width:575px;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  height:157px;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  background:url(1.jpg);/图片地址/&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  display:block;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">}</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">.pp a:hover</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">{&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  width:575px;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  height:157px;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  background:url(2.jpg);/替换的图片地址/&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  display:block;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">}</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;/style&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;/head&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;body&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">  &lt;div class="pp"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/div&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;/body&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;/html&gt;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">link:平时的状态 &nbsp;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">visited:被访问过之后</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">hover:鼠标放上时</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">active:被按下时 &nbsp;&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active &nbsp;一定要按上面的顺序写,不然显示的可能会和你预想的不一样</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">display:block;是将这行转化为块元素,具体为什么我也不太清楚,不过就是要加</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">如果有文字可能还要加一句让超链接没有下滑线的代码</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&nbsp;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">这段是一列一列的按钮</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;head&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;title&gt;无标题文档&lt;/title&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;/head&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;style type="text/css"&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">{ margin:0; padding:0;}<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">ul li{ list-style:none;}<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.nav{ width:800px; height:40px; margin:150px auto;}<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.nav ul li{ float:left; width:200px;}<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(1.jpg);}/链接、点击后/<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.nav ul li a:hover{background:url(2.jpg);}/鼠标经过/<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.nav ul li a:active{background:url(3.jpg);}/点击时*/<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;/style&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;body&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;div class="nav"&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;ul&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;/div&gt;</p><p .="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: 0px; line-height: 1.5em; color: rgb(0, 0, 0); font-size: 13px; ">&lt;/body&gt;<br .="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&lt;/html&gt;</p></span>

评论 ( 1 )
最新评论
xianglei 2011-01-19 10:46:44 1F

像这种TAB或MENU基本上都是用CSS来实现的,至于有的用了JS是因为比你的复杂(有子菜单)或者有特殊效果(动态的或其他)。