显示隐藏图片onmouseover

我有3张图片在彼此之上。第一个是普通的.jpg图像，第二个是灰度版本，第三个是某种效果，我添加了透明.png显示隐藏图片onmouseover

现在我想要的是，如果将鼠标移动到这些图像上，灰度图像被隐藏或被另一图像取代，然后再次可见。

这里的问题是，我是一个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>

会超真棒，如果有人能帮助我了:)

来源

2010-04-17 butters

[试试这个模拟器问题]（http://stackoverflow.com/questions/9400883/change-image-on-hover/9428063#9428063） – 2012-03-05 11:52:05

尝试增加这对你的CSS：

div.greyscale:hover img { display: none; }

如果您将鼠标悬停在灰度div上，这会隐藏您的图片。

来源

2010-04-17 22:13:27 Kdeveloper

嗯，但那不工作的影响最佳：/ – butters 2010-04-17 22:34:50

试试这个：

.frame:hover .greyscale { display: none; }

来源

2010-04-18 00:01:02

看看这个例子，

这里我有在顶部和下方3个图像的大图。

鼠标悬停sll 3张图片，他们将取代大一个。鼠标移出旧图像将返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title><br /> 

</head> 

<body> 
<p> 
    <script type="text/javascript" language="javascript"> 
function changeImage(img){ 
    document.getElementById('bigImage').src=img; 

} 
</script> 

    <img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /> 
<p>&nbsp; </p> 
<div> 
    <p> 
    <img src="../Pictures/lightcircle1.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> 

</p> 
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p> 

<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p> 

<p>&nbsp;</p> 


    </br> 
</div> 
</body> 
</html>

您可以按照您需要的方式修改它。干杯..

来源

2012-03-05 12:03:18

显示隐藏图片onmouseover

回答

相关问题