如何通过CSS实现Bootstrap 4卡片在导航菜单悬停时显示与隐藏？

嘿，我懂你遇到的问题了——想用CSS悬停导航菜单来切换对应卡片的显示，能隐藏卡片但死活触发不了display:block是吧？这九成是选择器的关联逻辑没搞对，毕竟CSS只能选择当前元素的后代、兄弟或者后续兄弟，没法直接跳转到完全不相关的元素上。我给你两套可行的方案，你根据自己的布局需求选：

方案一：把卡片放在导航项内部（兼容性好，逻辑简单） #

这种方式最直接，把每个卡片放在对应的导航项里，用相邻兄弟选择器就能轻松触发显示：

完整HTML结构

<div class="d-flex justify-content-center">
  <ul class="nav">
    <li class="nav-item" style="position: relative;"> <!-- 加相对定位让卡片能正确悬浮 -->
      <a class="nav-link itemOne" href="#">Product 1</a>
      <!-- 对应Product 1的卡片 -->
      <div class="card card-one">
        <h3>Product 1</h3>
        <p>这是Product 1的详细内容卡片</p>
      </div>
    </li>
    <li class="nav-item" style="position: relative;">
      <a class="nav-link itemTwo" href="#">Product 2</a>
      <!-- 对应Product 2的卡片 -->
      <div class="card card-two">
        <h3>Product 2</h3>
        <p>这是Product 2的详细内容卡片</p>
      </div>
    </li>
  </ul>
</div>

CSS样式

/* 默认隐藏所有卡片 */
.nav .card {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 1.2rem;
  border: 1px solid #eee;
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 200px;
}

/* 悬停导航链接时，显示相邻的卡片 */
.nav .itemOne:hover + .card-one {
  display: block;
}

.nav .itemTwo:hover + .card-two {
  display: block;
}

方案二：用:has()选择器（适合卡片和导航分离的布局） #

如果你的卡片必须和导航放在不同的区域，现代浏览器支持的:has()选择器可以帮你跨层级关联元素：

完整HTML结构

<!-- 给导航和卡片加一个共同的父容器 -->
<div class="menu-card-wrapper">
  <div class="d-flex justify-content-center">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link itemOne" href="#">Product 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link itemTwo" href="#">Product 2</a>
      </li>
    </ul>
  </div>

  <!-- 独立的卡片区域 -->
  <div class="card-container">
    <div class="card card-one">
      <h3>Product 1</h3>
      <p>这是Product 1的详细内容卡片</p>
    </div>
    <div class="card card-two">
      <h3>Product 2</h3>
      <p>这是Product 2的详细内容卡片</p>
    </div>
  </div>
</div>

CSS样式

/* 默认隐藏所有卡片 */
.card-container .card {
  display: none;
  margin-top: 1.5rem;
  padding: 1.2rem;
  border: 1px solid #eee;
  border-radius: 6px;
}

/* 当导航容器包含悬停的Product 1链接时，显示对应卡片 */
.menu-card-wrapper .d-flex:has(.itemOne:hover) ~ .card-container .card-one {
  display: block;
}

/* 同理处理Product 2 */
.menu-card-wrapper .d-flex:has(.itemTwo:hover) ~ .card-container .card-two {
  display: block;
}

为什么你之前的代码没生效？ #

大概率是你的选择器没有正确关联到目标卡片——比如你可能尝试直接从导航链接选择完全不相关的卡片元素，但CSS不允许跨无关联的层级选择。上面两种方案都是通过兄弟关系或父容器关联解决了这个问题。

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