隐藏在鼠标上的图像

Question

我彼此之间有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>

如果有人可以帮助我，那将是非常棒的:)

Answer 1

尝试这个：

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

Answer 2

尝试将其添加到您的CSS中：

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

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

Answer 3

看这个例子，

在这里，我在顶部有一张大图片，在下面有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>

您可以根据需要对其进行修改。 干杯..

隐藏在鼠标上的图像

问题描述

3 个解决方案

解决方案1
3 2010-04-18 00:01:02

解决方案2
1 2010-04-17 22:13:27

解决方案3
1 2012-03-05 12:03:18

隐藏在鼠标上的图像

问题描述

3 个解决方案

解决方案1 3 2010-04-18 00:01:02

解决方案2 1 2010-04-17 22:13:27

解决方案3 1 2012-03-05 12:03:18

解决方案1
3 2010-04-18 00:01:02

解决方案2
1 2010-04-17 22:13:27

解决方案3
1 2012-03-05 12:03:18