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

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

• javascript
• jquery
• html
• css
• bootstrap-4

• Are you trying to acplish this without using javascript? – Jay Jordan Commented Apr 14, 2018 at 9:51
• @Jay Jordan yeah ,but if u have any solution by using javascript that would be a great help – manu george Commented Apr 14, 2018 at 10:01
• See fiddle below. – Jay Jordan Commented Apr 14, 2018 at 10:02

1 Answer 1

I would use jQuery to acplish this.

CSS:

.item1, .item2 {
  display: none;
}

jQuery

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

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

Here is an example.