图片单独显示上面一半鼠标一移上去就显示下面一半 用CSS代码
发布网友
发布时间：2022-04-21 03:28
共2个回答
热心网友
时间：2022-04-21 04:58
<style>
.hellow{ background:url(bg.jpg) no-repeat left top; height:20px; width:100px; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer}
.hellow:hover{ background:url(bg.jpg) no-repeat left bottom;}
</style>
<div class="hellow">你好</div>
图片保存为bg.jpg
然后给div定义为hellow
鼠标放上去的样式为:hover 设置背景图片 不重复 左 底
热心网友
时间：2022-04-21 06:16
display:block;
width:112px;
height:36px;
background:url(notitle.png) 0 0 no-repeat;
}
#button:hover {
background:url(notitle.png) 50% 100% no-repeat;
}
追答
<style>
ul li {
margin:0;
padding:0;
list-style:none;
}
.button {
background:url(notitle.png) no-repeat;
background-position:0 0;
}
.button a {
display:block;
width:112px;
height:36px;
line-height:36px;
text-align:center;
color:#f1f1f1;
text-decoration:none;
}
.button a:hover {
background:transparent url(notitle.png) 0 100% no-repeat;
color:#424242;
}
</style>
<ul>
<li class="button"><a href="#">Just a Test</a></li>
</ul>
这样写测试过了，在IE6下都没问题。
