响应式内网站点图片hover效果失效问题求助

嘿，我看了你的代码和需求，发现几个核心问题导致hover效果没生效，咱们一步步来搞定它：

问题1：重复使用ID违反规则 #

你在HTML里给所有图片容器都用了id="movie-hover"，但ID在整个页面里必须是唯一的，浏览器只会识别第一个带这个ID的元素，后面的容器根本不会应用你写的CSS hover样式。

修复方案：把ID换成Class #

把所有<div id="movie-hover">改成<div class="movie-hover">，然后CSS里的#movie-hover替换成.movie-hover（Class选择器用点号）。

问题2：第一个图片的JS事件和CSS冲突 #

第一个图片里写了onmouseover和onmouseout来切换图片，这不仅和你要的“半透明看底层图”需求冲突，还会覆盖CSS的opacity效果——毕竟换图后显示的是另一张图，不是原图片半透明。

修复方案：移除JS事件逻辑 #

删掉第一个img标签里的onmouseover="this.src='css/images/movie-hover.jpg'" onmouseout="this.src='css/images/a-good-day-to-die-hard.jpg'"，统一用CSS实现半透明效果就够了。

优化布局和交互体验 #

原来的display: inline对于图片容器来说不够灵活，改成inline-block能更好控制间距；另外给图片加个过渡动画，hover效果会更顺滑。

修改后的完整代码 #

HTML部分

<div id="boxd"> 
  <!-- Start of Boxd 1 --> 
  <!-- start of row 1 --> 
  <div id="rowd"> 
    <div class="movie-hover">
      <a href="a-good-day-to-die-hard.html">
        <img src="css/images/a-good-day-to-die-hard.jpg" alt="Movie cover image of A Good Day to Die Hard" />
      </a>
    </div> 
    <div class="movie-hover">
      <a href="tammy.html">
        <img src="css/images/tammy.jpg" alt=""/>
      </a>
    </div> 
    <div class="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 class="movie-hover">
      <a href="secondhand-lions.html">
        <img src="css/images/secondhand-lions.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="logan.html">
        <img src="css/images/logan.jpg" alt="X-Men The Last Stand."/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="super-troopers.html">
        <img src="css/images/super-troopers.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="taken.html">
        <img src="css/images/taken.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="gran-torino.html">
        <img src="css/images/gran-torino.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="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 class="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 class="movie-hover">
      <a href="chips.html">
        <img src="css/images/chips.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="gladiator.html">
        <img src="css/images/gladiator.jpg" alt=""/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="braveheart.html">
        <img src="css/images/braveheart.jpg" alt="Movie cover image Braveheart 1995"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="the-jerk.html">
        <img src="css/images/the-jerk.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="the-patriot.html">
        <img src="css/images/the-patriot.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="the-postman.html">
        <img src="css/images/the-postman.jpg" alt="Movie cover image"/>
      </a>
    </div> 
    <div class="movie-hover">
      <a href="warcraft.html">
        <img src="css/images/warcraft.jpg" alt="Movie cover image" />
      </a>
    </div> 
    <div class="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%; 
  /* 添加平滑过渡效果 */
  transition: opacity 0.3s ease;
} 

.movie-hover { 
  display: inline-block; 
  /* 给图片容器加一点间距，避免挤在一起 */
  margin: 0 0.5%;
} 

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

这样修改后，所有图片都会在hover时呈现半透明效果，而且布局也更规整，交互体验更流畅。

内容的提问来源于stack exchange，提问作者bradley thomm