在悬停 Bootstrap 5 上交换 div 元素

Question

我试图在悬停时在 Bootstrap 5 行结构中交换 div 的内容。我目前正在尝试为此使用 Jquery，但该方法不起作用。它不会显示任何错误，只是不起作用。

我不太关心这是否可以在 JS 或 CSS 中完成，只需要一个可以在悬停时替换 div 内容的解决方案。此外，如果有替代动画（淡入淡出或滑动），那就太好了。

$('.switch').hover(function() {
  $(this).find('start1').hide();
  $(this).find('switched').show();
}

, function() {
  $(this).find('switched').hide();
  $(this).find('start1').show();
}

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container my-5">
  <div class="row gx-5 switch text-center rounded-3 shadow">
    <div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main1.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 1</h2>
    </div>
    <div class="switched" style="background: #D86241; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text here
      </p>
    </div>
    <div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main2.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 2</h2>
    </div>
    <div class="switched2" style="background: #A1274C; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </div>
    <div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
      <img src="images/main3.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 3</h2>
    </div>
    <div class="switched3" style="background: #771E3A; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </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>

Answer 1

你对 JavaScript 很熟悉。 this 最终成为 .switch 元素，因此您可以将其用作选择器的上下文。显然，您需要更新逻辑来处理所有菜单项。

$('.switch').hover(function() {
  $('.start1', this).hide();
  $('.switched', this).show();
}, function() {
  $('.switched', this).hide();
  $('.start1', this).show();
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
  <div class="row gx-5 switch text-center rounded-3 shadow">
    <div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main1.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 1</h2>
    </div>
    <div class="switched" style="background: #D86241; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text here
      </p>
    </div>
    <div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main2.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 2</h2>
    </div>
    <div class="switched2" style="background: #A1274C; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </div>
    <div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
      <img src="images/main3.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 3</h2>
    </div>
    <div class="switched3" style="background: #771E3A; display:none;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </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:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
  display: none !important;
}

.switched,
.switched2,
.switched3 {
  display: none;
}

.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
  display: block;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container my-5">
  <div class="row gx-5 switch text-center rounded-3 shadow">
    <div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main1.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 1</h2>
    </div>
    <div class="switched" style="background: #D86241">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text here
      </p>
    </div>
    <div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
      <img src="images/main2.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 2</h2>
    </div>
    <div class="switched2" style="background: #A1274C;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </div>
    <div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
      <img src="images/main3.png" class="img-fluid h-50" alt="">
      <h2 class="headingGreen mt-3">Heading 3</h2>
    </div>
    <div class="switched3" style="background: #771E3A;">
      <h1 class="display-6 fw-bold heading">A Heading</h1>
      <p class="lead">
        Some text
      </p>
    </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>

Answer 2

所以我想出了一个使用 CSS 的解决方案。结果整个事情比我想象的要简单得多。

Here's the Codepen.

HTML：

 <div class="container my-5 px-5">
        <div class="row switch gx-5 text-center rounded-3 shadow">
          <div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
            <!-- OG content -->
            <img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
            <h2 class="headingGreen hider">A heading</h2>
            <!-- Hover content -->
            <h2 class="display-5 heading shower">A heading</h2>
            <p class="lead shower">
              Some text
            </p>
          </div>
          <div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
            <!-- OG content -->
            <img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
            <h2 class="headingGreen hider">A heading</h2>
            <!-- Hover content -->
            <h2 class="display-5 heading shower">A heading</h2>
            <p class="lead shower">
              Some text
            </p>
          </div>
          <div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
            <!-- OG content -->
            <img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
            <h2 class="headingGreen hider">A heading</h2>
            <!-- Hover content -->
            <h2 class="display-5 heading shower">A heading</h2>
            <p class="lead shower">
              Some text
            </p>
          </div>
        </div>
      </div>

CSS：

  .start1{
      transition: background-color .25s;
    }

    .start2{
      transition: background-color .25s;
    }

    .start3{
      transition: background-color .25s;
    }

    .start1:hover{
      background-color: #D86241;
    }

    .start2:hover{
      background-color: #A1274C;
    }

    .start3:hover{
      background-color: #771E3A;
    }

    .shower{
      display: none;
      color: white;
      text-align: left !important;
    }
    .start1:hover .hider,
    .start2:hover .hider,
    .start3:hover .hider
    {
      display: none;
    }
    .start1:hover .shower,
    .start2:hover .shower,
    .start3:hover .shower
    {
      display: block;
    }