顯示隱藏圖片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

回答

相關問題