HTML 5图像未悬停显示

Question

我正在重建我的Intranet网站以仅出于娱乐目的而响应，现在图像悬停的代码不起作用。 我试图以几种不同的方式重建它，但没有成功。 默认情况下，所有图像的高度和宽度都相同。 应该将影片悬停图像悬停在不透明的影片图像上，以仍然能够看到其后面的图像。 由于我一直在搞乱CSS，因此CSS确实被精简了。 任何帮助将非常感激。

HTML5

<div id="boxd"> <!-- Start of Boxd 1 -->

    <!-- start of row 1 -->

      <div id="rowd">
       <div id="movie-hover"><a href="a-good-day-to-die-hard.html"><img src="css/images/a-good-day-to-die-hard.jpg" onmouseover="this.src='css/images/movie-hover.jpg'" onmouseout="this.src='css/images/a-good-day-to-die-hard.jpg'" alt="Movie cover image of A Good Day to Die Hard" /></a></div>
       <div id="movie-hover"><a href="tammy.html"><img src="css/images/tammy.jpg" alt=""/></a></div>
       <div id="movie-hover"><a href="xxx-the-return-of-xander-cage.html"><img src="css/images/xxx-the-return-of-xander-cage.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="secondhand-lions.html"><img src="css/images/secondhand-lions.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="logan.html"><img src="css/images/logan.jpg" alt="X-Men The Last Stand."/></a></div>
       <div id="movie-hover"><a href="super-troopers.html"><img src="css/images/super-troopers.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="taken.html"><img src="css/images/taken.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="gran-torino.html"><img src="css/images/gran-torino.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="o-brother-where-art-thou.html"><img src="css/images/o-brother-where-art-thou.jpg" alt="Movie cover image"/></a></div>

       <div id="movie-hover"><a href="the-lord-of-the-rings-the-fellowship-of-the-ring.html"><img src="css/images/the-lord-of-the-rings-the-fellowship-of-the-ring.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="chips.html"><img src="css/images/chips.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="gladiator.html"><img src="css/images/gladiator.jpg" alt=""/></a></div>
       <div id="movie-hover"><a href="braveheart.html"><img src="css/images/braveheart.jpg" alt="Movie cover image Braveheart 1995"/></a></div>
       <div id="movie-hover"><a href="the-jerk.html"><img src="css/images/the-jerk.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="the-patriot.html"><img src="css/images/the-patriot.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="the-postman.html"><img src="css/images/the-postman.jpg" alt="Movie cover image"/></a></div>
       <div id="movie-hover"><a href="warcraft.html"><img src="css/images/warcraft.jpg" alt="Movie cover image" /></a></div>
       <div id="movie-hover"><a href="dune.html"><img src="css/images/dune.jpg" alt="Movie cover image" /></a></div>

       </div>    
     </div>

CSS

#rowd {
    padding-top: 10px;
    padding-bottom: 10px;
}

#boxd {
    text-align: center;
}

#boxd img {
    height: 48%;
    width: 48%;
}

#movie-hover {
    display: inline;
}

#movie-hover img:hover {
    opacity: 0.6;
}

Answer 1

您所有的图像都是JPEG，不支持透明或半透明的格式。

设置背景图像时，前景图像会完全掩盖它。

---

不透明度适用于整个元素 ，而不仅仅是其前景。

---

而是使用JavaScript切换src属性。