如何用CSS样式来实现当鼠标放上去时会出现另一张背景图片呢
1个回答
展开全部
做好准备工作,把两张100px
X
100px的图片合成
100
X
200
的。通过CSS图片定位来达到切换效果。存放在根目录
img\tupian.gif
<style>
#div_1{width:100px;height:100px;margin:0;padding:0;}
定义一个DIV方框
#div_1
ul,li{list-style:none;margin:0px;padding:0px;}
定义div_1中UL,LI
#div_1
li{float:left;margin:0;}
#div_1
a{
background:url(img/tupian.gif)
no-repeat;width:100px;height:100px;display:block;
}
定div_1中链接背景样式等
#a1
a:hover,#a1
a:active{
background-position:
0px
-100px;height:100px;
}
定义一个鼠标悬停状态
</style>
在BODY中
<div
id="div_1"><ul>
<li><a
href="#">首页</a></li>
X
100px的图片合成
100
X
200
的。通过CSS图片定位来达到切换效果。存放在根目录
img\tupian.gif
<style>
#div_1{width:100px;height:100px;margin:0;padding:0;}
定义一个DIV方框
#div_1
ul,li{list-style:none;margin:0px;padding:0px;}
定义div_1中UL,LI
#div_1
li{float:left;margin:0;}
#div_1
a{
background:url(img/tupian.gif)
no-repeat;width:100px;height:100px;display:block;
}
定div_1中链接背景样式等
#a1
a:hover,#a1
a:active{
background-position:
0px
-100px;height:100px;
}
定义一个鼠标悬停状态
</style>
在BODY中
<div
id="div_1"><ul>
<li><a
href="#">首页</a></li>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询