纯CSS实现鼠标移动到图片时,更换图片的样式效果


CSS实现鼠标移动到图片,更换图片,这是一个完全用CSS实现的效果,当然用JavaScript也可以实现,当把鼠标移动到图片的时候,图片自动更换为其它的图片,由此我们可以制作一些效果复杂的按钮,比如换色按钮。


<style type=”text/css”>
*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(demoimg/wall_s1.jpg);}/*链接、点击后*/
.nav ul li a:hover{background:url(demoimg/wall_s2.jpg);}/*鼠标经过*/
.nav ul li a:active{background:url(demoimg/wall_s3.jpg);}/*点击时*/
</style>
<body>
<div class=”nav”>
<ul>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>
</body>


当然,这样写确实有点麻烦,艾雪雪也通过实践,以导航栏为例,简略了一下写法:
<style type=”text/css”>
*{ margin:0; padding:0;}
.dh a { font-family:”微软雅黑”; font-size:16px; color:#FFFFFF; padding:12px 20px 10px 20px;}/*dh导航~*/
.dh a:hover{ color:#0080FF; }
.nav { width:1000px;}
.nav ul li{ width:116px; list-style: none; height:20px; display:inline-block;}
.nav ul li a:hover{background:url(../images/index_12.jpg) no-repeat;}
</style>
<body>

<div class=”dh”>

…..
<div class=”nav”>
<ul>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>

….

</div>
</body>


因为是写在导航栏上,所以直接搬出来作为借鉴学习,此处背景没有设定图片,其实css样式可以简单理解为:

html: <div id=”link”></div>

css:
#link{ width:**px; height:**px; background-image:url(../picture1.jpg); }
#link a:hover{background-image:url(../picture2.jpg); }


留言

Leave a comments