How to hide and show bootstrap 4 cards by hovering over navigation menu through css?

问题

Hi I'm trying to show and hide particular section of cards by just hovering over the menu list ,I can hide cards using css but can't display it by display:block property of css for specific class...

HTML

Navigation Menu

<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>

Card Section

  <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;
 }

回答1:

I would use jQuery to accomplish this.

CSS:

.item1, .item2 {
  display: none;
}

jQuery

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

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

Here is an example.

来源：https://stackoverflow.com/questions/49830079/how-to-hide-and-show-bootstrap-4-cards-by-hovering-over-navigation-menu-through

标签

javascript

jquery

html

css

bootstrap-4