文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在悬停引导5上交换div元素

问在悬停引导5上交换div元素
EN

Stack Overflow用户
提问于 2022-01-09 15:37:30
回答 2查看 222关注 0票数 1

我试图在悬停时交换引导5行结构中div的内容。我目前正在尝试使用Jquery来实现这个目的，但是这个方法不起作用。它没有显示出任何错误，只是不起作用。

我不在乎这是否可以在JS或CSS中完成，只需要一个可以在悬停时替代div内容的解决方案。此外，如果有一个替代动画(淡出或幻灯片)，那将是很好的。

​

代码语言：javascript
复制
$('.switch').hover(function() {
  $(this).find('start1').hide();
  $(this).find('switched').show();
}

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

)
代码语言：javascript
复制
<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
javascript
html
jquery
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-10 03:07:28

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

这是书房。

HTML :

代码语言：javascript
复制
 <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 :

代码语言：javascript
复制
  .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;
    }
票数 0
EN

Stack Overflow用户

发布于 2022-01-09 15:44:45

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

​

代码语言：javascript
复制
$('.switch').hover(function() {
  $('.start1', this).hide();
  $('.switched', this).show();
}, function() {
  $('.switched', this).hide();
  $('.start1', this).show();
})
代码语言：javascript
复制
<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的方法。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70642838

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档