Question

您好我只是将鼠标悬停在菜单列表上来显示和隐藏特定部分的卡片，我可以使用css隐藏卡片，但无法通过显示来显示它：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。

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

1 个答案: