Swap div elements on hover Bootstrap 5-CodePudding

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.

HTML:

  <div >
    <div >
      <div >
        <img src="images/main1.png"  alt="">
        <h2 >Heading 1</h2>
      </div>
      <div  style="background: #D86241; display:none;">
        <h1 >A Heading</h1>
        <p >
          Some text here
        </p>
      </div>
      <div >
        <img src="images/main2.png"  alt="">
        <h2 >Heading 2</h2>
      </div>
      <div  style="background: #A1274C; display:none;">
        <h1 >A Heading</h1>
        <p >
          Some text
        </p>
      </div>
      <div >
        <img src="images/main3.png"  alt="">
        <h2 >Heading 3</h2>
      </div>
      <div  style="background: #771E3A; display:none;">
        <h1 >A Heading</h1>
        <p >
          Some text
        </p>
      </div>
    </div>
    <div  style="margin-top:50px;">
      <button type="button"  name="button"> About us</button>
    </div>
  </div>

JS:

  <script type="text/javascript">
    $('.switch').hover(function(){
      $(this).find('start1').hide();
      $(this).find('switched').show();
    }, function(){
      $(this).find('switched').hide();
      $(this).find('start1').show();
    })
  </script>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <img src="images/main1.png"  alt="">
      <h2 >Heading 1</h2>
    </div>
    <div  style="background: #D86241; display:none;">
      <h1 >A Heading</h1>
      <p >
        Some text here
      </p>
    </div>
    <div >
      <img src="images/main2.png"  alt="">
      <h2 >Heading 2</h2>
    </div>
    <div  style="background: #A1274C; display:none;">
      <h1 >A Heading</h1>
      <p >
        Some text
      </p>
    </div>
    <div >
      <img src="images/main3.png"  alt="">
      <h2 >Heading 3</h2>
    </div>
    <div  style="background: #771E3A; display:none;">
      <h1 >A Heading</h1>
      <p >
        Some text
      </p>
    </div>
  </div>
  <div  style="margin-top:50px;">
    <button type="button"  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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <img src="images/main1.png"  alt="">
      <h2 >Heading 1</h2>
    </div>
    <div  style="background: #D86241">
      <h1 >A Heading</h1>
      <p >
        Some text here
      </p>
    </div>
    <div >
      <img src="images/main2.png"  alt="">
      <h2 >Heading 2</h2>
    </div>
    <div  style="background: #A1274C;">
      <h1 >A Heading</h1>
      <p >
        Some text
      </p>
    </div>
    <div >
      <img src="images/main3.png"  alt="">
      <h2 >Heading 3</h2>
    </div>
    <div  style="background: #771E3A;">
      <h1 >A Heading</h1>
      <p >
        Some text
      </p>
    </div>
  </div>
  <div  style="margin-top:50px;">
    <button type="button"  name="button"> About us</button>
  </div>
</div>

CodePudding user response：

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 >
        <div >
          <div >
            <!-- OG content -->
            <img src="https://via.placeholder.com/200"  alt="">
            <h2 >A heading</h2>
            <!-- Hover content -->
            <h2 >A heading</h2>
            <p >
              Some text
            </p>
          </div>
          <div >
            <!-- OG content -->
            <img src="https://via.placeholder.com/200"  alt="">
            <h2 >A heading</h2>
            <!-- Hover content -->
            <h2 >A heading</h2>
            <p >
              Some text
            </p>
          </div>
          <div >
            <!-- OG content -->
            <img src="https://via.placeholder.com/200"  alt="">
            <h2 >A heading</h2>
            <!-- Hover content -->
            <h2 >A heading</h2>
            <p >
              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;
    }