如何用css或者js实现当鼠标移动到上面，出现另一张图片，而原图片依然在它的下面。（也就是，当鼠标移动到上面，出现一层水印效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>æ°´å°æµè¯</title>
<style>
.div{
position:relative;
width:300px;
height:300px;
background:url(img/1.jpg) no-repeat left top;
background-size:100%;
}
.div .ico{
width:100px;
height:100px;
position:absolute;
right:10px;
bottom:10px;
display:none;
background:url(img/1.png) no-repeat left top;
background-size:100px;
}
.div:hover .ico{
display:block;
}
</style>
</head>
<body>
<div class="div">
<div class="ico"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>æ°´å°æµè¯</title>
<style>
.div{
position:relative;
width:300px;
height:300px;
background:url(img/1.jpg) no-repeat left top;
background-size:100%;
}
.div .ico{
width:100px;
height:100px;
position:absolute;
right:10px;
bottom:10px;
display:none;
background:url(img/1.png) no-repeat left top;
background-size:100px;
}
.div:hover .ico{
display:block;
}
</style>
</head>
<body>
<div class="div">
<div class="ico"></div>
</div>
</body>
</html>
è¿ä¸ªæ¯ç¨çº¯csså®ç°çï¼æ¢æå¾çä¸ä¸ªéçã
温馨提示：答案为网友推荐，仅供参考
第1个回答 2015-01-07
<head>
<style>
.show
{
z-index=99;
}
.hide
{
z-index=-999;
display=none;
}
.show .hide
{
top:0;
left:0;
position:absolute;
}
</style>
</head>
<body>
<img src=... class="show"/>
<img src=... class="hide"/>
<script>
var oImg=document.getElementsByTagName("img");
oImg[0].onmouseover=function showIt()
{
oImg[1].style.display="inline";
oImg[1].style.zIndex=100;
oImg[1].style.opacity=...; //设置透明度
}
</script>
</body>
<style>
.show
{
z-index=99;
}
.hide
{
z-index=-999;
display=none;
}
.show .hide
{
top:0;
left:0;
position:absolute;
}
</style>
</head>
<body>
<img src=... class="show"/>
<img src=... class="hide"/>
<script>
var oImg=document.getElementsByTagName("img");
oImg[0].onmouseover=function showIt()
{
oImg[1].style.display="inline";
oImg[1].style.zIndex=100;
oImg[1].style.opacity=...; //设置透明度
}
</script>
</body>
