HTML中div标签并排问题：hover换图后链接垂直排列求助

问题根源 #

1. CSS中使用了类选择器.imgdiv1/.imgdiv2，但HTML里的子div是ID选择器#imgdiv1/#imgdiv2，导致float属性未生效，div默认作为块级元素垂直排列。
2. 鼠标悬停时将图片设为display:block并添加float，破坏了链接内部的行内布局。
3. HTML中错误使用了<image>标签，正确标签应为<img>。

修正后的代码 #

CSS代码

#imgdiv1, #imgdiv2 {
  float: left;
  margin-right: 20px; /* 可选：给链接之间添加间距 */
}

/* 统一图片切换逻辑，减少重复代码 */
.toggle-img {
  display: none;
}

.img-wrap:hover .default-img {
  display: none;
}

.img-wrap:hover .toggle-img {
  display: inline-block;
}

HTML代码

<div class="main">
  <div id="imgdiv1" class="img-wrap">
    <a href="site1.html">
      <img src="Off.png" id="Off1" class="default-img"/>
      <img src="On.png" id="On1" class="toggle-img"/>
      Site1
    </a>
  </div>
  <div id="imgdiv2" class="img-wrap">
    <a href="site2.html">
      <img src="Off.png" id="Off2" class="default-img"/>
      <img src="On.png" id="On2" class="toggle-img"/>
      Site2
    </a>
  </div>
  <!-- 清除浮动，避免main容器高度塌陷 -->
  <div style="clear: both;"></div>
</div>

关键改动说明 #

• 修正CSS选择器匹配问题，让float属性正确作用到子div上，实现水平排列。
• 用类统一处理图片切换逻辑，将切换后的图片设为inline-block，保持和文字在同一行布局。
• 修复<image>标签为标准<img>标签。
• 添加清除浮动元素，防止父容器因子元素浮动出现高度塌陷问题。

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