Bootstrap 5鼠标悬停切换Div内容实现方案求助

嘿，我帮你排查下问题哈！你的jQuery代码没生效主要是两个小坑，先给你指出来，再给你两种带动画的实现方案，选哪个都行~

现有代码的问题 #

1. 选择器错误：你写的$(this).find('start1')少了类选择器的.，应该是$(this).find('.start1')，同理.switched、.switched2这些类选择器都要加.，不然jQuery找不到对应的元素，自然没反应。
2. 布局结构问题：你的.switched系列div没有Bootstrap的列类（比如col-md-4），而且和对应的.start* div是同级，在Row里会导致布局混乱，悬停显示时排版会乱套。正确的做法是把每个start内容和对应的switched内容放到同一个col-md-4容器里，这样每个列是独立的切换单元。

方案一：纯CSS实现（淡入淡出动画，推荐） #

纯CSS方案更轻量，不需要依赖JS，而且过渡动画更流畅。先调整HTML结构，再加几行CSS就行：

调整后的HTML #

<div class="container my-5">
  <div class="row gx-5 text-center rounded-3 shadow">
    <!-- 第一个切换单元 -->
    <div class="col-md-4 switch-col border-end position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="start-content">
        <img src="images/main1.png" class="img-fluid h-50" alt="">
        <h2 class="headingGreen mt-3">Heading 1</h2>
      </div>
      <div class="switched-content" style="background: #D86241; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items-center; opacity:0; visibility:hidden; transition: all 0.3s ease;">
        <h1 class="display-6 fw-bold heading">A Heading</h1>
        <p class="lead"> Some text here </p>
      </div>
    </div>
    <!-- 第二个切换单元 -->
    <div class="col-md-4 switch-col border-end position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="start-content">
        <img src="images/main2.png" class="img-fluid h-50" alt="">
        <h2 class="headingGreen mt-3">Heading 2</h2>
      </div>
      <div class="switched-content" style="background: #A1274C; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items-center; opacity:0; visibility:hidden; transition: all 0.3s ease;">
        <h1 class="display-6 fw-bold heading">A Heading</h1>
        <p class="lead"> Some text </p>
      </div>
    </div>
    <!-- 第三个切换单元 -->
    <div class="col-md-4 switch-col position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="start-content">
        <img src="images/main3.png" class="img-fluid h-50" alt="">
        <h2 class="headingGreen mt-3">Heading 3</h2>
      </div>
      <div class="switched-content" style="background: #771E3A; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items-center; opacity:0; visibility:hidden; transition: all 0.3s ease;">
        <h1 class="display-6 fw-bold heading">A Heading</h1>
        <p class="lead"> Some text </p>
      </div>
    </div>
  </div>
  <div class="d-grid col-2 mx-auto" style="margin-top:50px;">
    <button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
  </div>
</div>

对应的CSS #

/* 悬停时切换内容的透明度和可见性，实现淡入淡出 */
.switch-col:hover .start-content {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.switch-col:hover .switched-content {
  opacity: 1;
  visibility: visible;
}

说明：

• 把每个列设为position-relative，让内部的switched-content可以用绝对定位覆盖整个列（用inset:0代替top/left/right/bottom更简洁）。
• 用opacity和visibility实现过渡动画，比display:none更适合做动画，因为display属性无法触发过渡效果。

方案二：修复后的jQuery实现（滑动/淡入淡出动画） #

如果你更倾向用JS实现，先修复选择器和结构，再用jQuery的动画方法：

调整后的HTML（和方案一的HTML结构一致） #

修复后的jQuery代码 #

$(document).ready(function() {
  // 给每个切换列绑定悬停事件
  $('.switch-col').hover(
    // 鼠标移入时：隐藏初始内容，显示切换内容
    function() {
      $(this).find('.start-content').fadeOut(300);
      $(this).find('.switched-content').fadeIn(300);
      // 想要滑动效果的话，把fadeOut/fadeIn换成slideUp/slideDown即可
      // $(this).find('.start-content').slideUp(300);
      // $(this).find('.switched-content').slideDown(300);
    },
    // 鼠标移出时：隐藏切换内容，显示初始内容
    function() {
      $(this).find('.switched-content').fadeOut(300);
      $(this).find('.start-content').fadeIn(300);
      // 滑动效果对应：
      // $(this).find('.switched-content').slideUp(300);
      // $(this).find('.start-content').slideDown(300);
    }
  );
});

说明：

• 把代码放在$(document).ready()里，确保DOM加载完成后再执行，避免找不到元素的问题。
• 用fadeIn/fadeOut实现淡入淡出，或者slideUp/slideDown实现滑动动画，时间参数300是毫秒，可以根据需要调整。

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