Swap div elements on hover Bootstrap 5

user_7525187 0
Viewed 190

I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.

I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.

$('.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>

twitter-bootstrap css html jquery javascript
2 Answers

You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.

$('.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>

Alternatively, here is a CSS-based approach

.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>

user_4597500

So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.

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;
    }
user_75251870
Related