效果说明:鼠标经过图1,变成图2样式,IE8下测试通过
图1
图2
下面介绍使用js来写
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; }
html代码
<div id="c1"> <img src="img02.jpg" class="img1" onmouseover="showicon()" onmouseout="hideicon()"/> <div id="c1_1"><img src="icon01.png"/></div> <div id="c1_2"><a href="#">海运服务</a></div> </div>
js代码
function showicon(){ document.getElementById("c1_1").style.display="block"; } function hideicon(){ document.getElementById("c1_1").style.display="none"; }