Question

我正在重建我的内部网站点，只是为了好玩而响应，现在我的图像悬停的代码无效。我试图以几种不同的方式重建它，却没有成功。默认情况下，所有图像的高度和宽度都相同。电影悬停图像应该悬停在具有不透明度的电影图像上，以便仍然可以看到它背后的图像。 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属性。

HTML 5图像在悬停时不显示

1 个答案: