[英]show-hide image onmouseover
我彼此之間有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>
如果有人可以幫助我,那將是非常棒的:)
嘗試這個:
.frame:hover .greyscale { display: none; }
嘗試將其添加到您的CSS中:
div.greyscale:hover img { display: none; }
如果將鼠標懸停在灰度div上,這將隱藏您的圖像。
看這個例子,
在這里,我在頂部有一張大圖片,在下面有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> </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> </p>
</br>
</div>
</body>
</html>
您可以根據需要對其進行修改。 干杯..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.