如何通过 css 将鼠标悬停在导航菜单上来隐藏和显示 bootstrap 4 卡？

Question

嗨，我试图通过将鼠标悬停在菜单列表上来显示和隐藏卡片的特定部分，我可以使用 css 隐藏卡片，但不能通过 display:block 特定类的 css 属性来显示它...

HTML

导航菜单

<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  item1" style="width:12rem;">
  <img class="card-img-top item" src="../image1" alt="Card image cap">
  <div class="card-body item1">
  <h5 class="card-title item1">Card title</h5>
  <p class="card-text  item1">This is a wider card with supporting text 
  below as a natural lead-in to additional content. This content is a little 
  bit longer.</p>
 </div>
</div>
<div class="card item2" style="width:12rem;">
<img class="../image2" alt="Card image cap">
<div class="card-body item2">
 <h5 class="card-title item2">Card title</h5>
 <p class="card-text item2">This is a wider card with supporting text below 
  as a natural lead-in to additional content. This content is a little bit 
  longer. 
 </p>
</div>
</div>

CSS

.item1{
display:none;
 }
.item2{
 display:none;
 }
.itemOne:hover .item1{   //Not displaying item 1
 display:block;
 }
.itemTwo:hover .item2{    //Not displaying item 2
 display:block;
 }

Answer 1

我会使用 jQuery 来完成这个。

CSS：

.item1, .item2 {
  display: none;
}

jQuery

$('.itemOne').hover(function() {
    $('.item1').toggle();
});

$('.itemTwo').hover(function() {
    $('.item2').toggle();
});

这是example。