Html 如何使图像在鼠标悬停时透明？

我不熟悉html/css编程，我正在尝试为我的班级编写一个网站。从本质上说，我试图让这个页面的照片：www.stanford.edu/~tayoamos变得更透明，当你将它们悬停在上面时，在上面显示另一个图像

以下是我的html和css：

HTML

非常感谢你

这样做：

img:hover{
  opacity:0.4; /* how much transparent you want image to be*/
  filter:alpha(opacity=40); /* browser fix*/
  -webkit-opacity:0.4; /*vendor prefixes for website browsers*/
  -moz-opacity:0.4; /* same as above, edited thankx to @ Daniel_Lisik  */
}

另外，您的

alt

在一些

img

标签中遗漏了

=

编辑

若要在将鼠标悬停在顶部图像上时显示下面的图像，必须执行以下操作：

• wrap

  您希望在默认情况下显示的图像对，并将其悬停在单个

  div

• 使图像

  绝对

  位置和容器

  相对

CSS

.imgdiv, #photos {
    position:relative; /* very important */
}

/* stack images one behind other */
.imgdiv > img.top {
    position:absolute;
    z-index:10;
}
.imgdiv > img.bottom {
    position:relative;
    z-index:9;
}

/* this part css will work on hover */
.imgdiv > img.top:hover {
    cursor:pointer;
    opacity:0.1; /* make top image go invisisble  */
    filter:alpha(opacity=10);
    -webkit-opacity:0.;
    -moz-opacity:0.1;
}

---

不透明度属性不适用于ie8，请使用filter:alpha（不透明度=40）使图像透明

虽然这不是我的专业领域，但我发现了一些您可能想要查看的资源（如果您还没有）：

---

这两个都包含一些易于理解的示例。

不透明度与css过渡效果

---

如果您想显示另一个

img

，您需要使用

javascript

jQuery

@user3240333:用户参与通常是一个好迹象，告诉您答案是否有用！！：）有趣的是，在我取出css代码的第一部分之后，它就开始工作了。无论如何，再次谢谢你！别忘了

-webkit不透明度：0.4-moz不透明度：0.4用于跨浏览器支持。非常感谢！这非常有帮助。你知道我怎么在上面再加一张图片吗？比如，当你将鼠标悬停在上面时，图像更透明，但另一个图像出现在它上面？我也输入了代码，但它仍然无法工作…可能与“#photos”语法或其他什么有关？@user3240333:添加了一个编辑答案…请检查@user3240333:很高兴我能帮上忙……您能将答案标记为已接受，这样问题就可以被视为已结束了吗？？）它总是伟大的张贴一个例子+进一步的信息链接的答案。好了；）
img:hover{
  opacity:0.4; /* how much transparent you want image to be*/
  filter:alpha(opacity=40); /* browser fix*/
  -webkit-opacity:0.4; /*vendor prefixes for website browsers*/
  -moz-opacity:0.4; /* same as above, edited thankx to @ Daniel_Lisik  */
}

.imgdiv, #photos {
    position:relative; /* very important */
}

/* stack images one behind other */
.imgdiv > img.top {
    position:absolute;
    z-index:10;
}
.imgdiv > img.bottom {
    position:relative;
    z-index:9;
}

/* this part css will work on hover */
.imgdiv > img.top:hover {
    cursor:pointer;
    opacity:0.1; /* make top image go invisisble  */
    filter:alpha(opacity=10);
    -webkit-opacity:0.;
    -moz-opacity:0.1;
}

img {
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}

img:hover{
opacity: 0.5; 
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}