效果说明:鼠标经过图1,变成图2样式,IE8下测试通过
图1
图2
下面介绍使用css来写
css代码
#c1 {
width: 300px;
height: 250px;
border: 1px solid #000;
position: relative;
}
#c1 .img1 {
width: 300px;
height: 250px;
}
#c1 #c1_1 {
width: 300px;
height: 56px;
line-height: 50px;
text-align: center;
position: absolute;
left: 0;
top: 144px;
display:none;
}
#c1 #c1_2 {
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 0;
top: 200px;
background: #F00;
}
#c1 #c1_2 a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
#c1 #c1_2 a:hover {
color: #fff;
text-decoration: underline;
font-weight: bold;
}
#c1:hover #c1_1{
display:block;
}
html代码
<div id="c1">
<img src="img02.jpg" class="img1"/>
<div id="c1_1"><img src="icon01.png"/></div>
<div id="c1_2"><a href="#">海运服务</a></div>
</div>