我有 3 张图像在彼此之上。第一个是普通的.jpg图像,第二个是灰度版本,第三个是我用透明的.png添加的某种效果
现在我想要的是,如果我将鼠标移到这些图像上,灰度图像将被隐藏或替换为另一个图像,然后再次可见。
这里的问题是我是一个js菜鸟,所以我很难找到解决方案^^
我的代码看起来像这样:
<html>
<head>
<style type="text/css">
<!--
ul li{
display: inline-table;
}
.frame{
position: relative;
height: 110px;
width: 110px;
}
.frame div{
position: absolute;
top:0px;
left:0px;
}
.effect{
background:url(images/effect.png) no-repeat;
height:110px;
width: 110px;
}
.image{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
.greyscale{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
-->
</style>
</head>
<body>
<ul>
<li>
<div class="frame">
<div class="image"><img src="images/pic1.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div>
<div class="effect">qwert</div>
</div>
</li>
<li>
<div class="frame">
<div class="image"><img src="images/pic2.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div>
<div class="effect">qewrt</div>
</div>
</li>
</ul>
</body>
</html>
如果有人可以帮助我,那就太棒了:)