Bootstrap Panel-Group鼠标悬停切换图片问题求助

我明白你的需求——想要鼠标悬停在整个面板区域（而不只是图片）时切换图片，而不是只在图片上悬停才触发。这里有两种简单的实现方案，你可以根据需求选择：

方案一：纯CSS实现（无需JS） #

这个方案最简洁，不需要额外的JavaScript代码，利用CSS的:hover伪类和选择器来控制图片显示：

步骤1：调整HTML结构 #

先移除#HoverImg上的hide类，因为我们会用CSS来控制它的初始状态：

<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" download="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td>
                <img id="defaultImg" src="img/folder.png" alt="folder" />
                <img id="HoverImg" src="img/folderHover.png" alt="folder" />
              </td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

步骤2：添加CSS样式 #

在你的现有CSS基础上，增加以下代码，当鼠标悬停在.panel-body上时，切换两张图片的显示状态：

.panel-body { background-color: RGB(203, 207, 208); }
.panel-body p { margin-right: 20px; }
.panel-body:hover { background-color: #6AA9DD; color: white; }
.panel { min-width: 350px; }

/* 新增：控制图片初始状态和悬停切换 */
#HoverImg {
  display: none; /* 默认隐藏 hover 图片 */
}
.panel-body:hover #defaultImg {
  display: none; /* 悬停时隐藏默认图片 */
}
.panel-body:hover #HoverImg {
  display: inline-block; /* 悬停时显示 hover 图片 */
}

方案二：jQuery实现（更简洁的单图片切换） #

如果你不想维护两张图片标签，可以只保留一张图片，通过jQuery动态修改src属性来实现切换：

步骤1：简化HTML结构 #

只保留一张图片，给它一个统一的ID：

<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" download="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td>
                <img id="folderImg" src="img/folder.png" alt="folder" />
              </td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

步骤2：添加jQuery代码 #

在你的现有JS代码后面，添加以下hover事件监听：

// 监听面板的悬停事件，切换图片src
$('.panel-body').hover(
  function() {
    // 鼠标进入时切换为hover图片
    $(this).find('#folderImg').attr('src', 'img/folderHover.png');
  },
  function() {
    // 鼠标离开时恢复默认图片
    $(this).find('#folderImg').attr('src', 'img/folder.png');
  }
);

两种方案都能实现你要的效果：鼠标悬停在整个面板的任意区域（包括文本部分）时，图片都会切换。纯CSS方案更轻量，jQuery方案更灵活（比如后续可以扩展更多悬停效果）。

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