Comment faire apparaître "div-md-6" div en survolant les éléments de la liste dans div séparé

Question

Voici le code que j'ai sur mon document HTML. J'ai essayé d'obtenir cette action de stationnaire pour travailler, je l'ai seulement obtenu pour travailler jusqu'ici quand la description est un enfant de l'étiquette de li, qui n'est pas ce que je veux. Je veux que la description soit montrée comme div séparé.

   <div class="row"> 
       <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s"> 
        <h2>Services</h2> 
         <ul class="services-list flex"> 
<!--Hover this list item for description div to appear--> 
         <li id="item-1" class="wow fadeIn" data-wow-delay="1s"><h5><a href="#">Lighting System Design</a></h5> 
          <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign"> 

         </li> 
         </ul> 
        </div> 
<!--Description div i want to appear when hover on #item-1--> 
        <div class="col-md-6 header-left wow fadeIn" id="description-1"> 
        <h4>Lighting System Design</h4> 
        <p>Determining the equipment and programing required that meet interior anenter code hered exterior lighting specifications.</p> 
        </div> 
       </div> 
      </div> 

Answer 1

Depuis l'élément que vous souhaitez afficher n'est pas adjacent ou à l'intérieur de l'élément que vous souhaitez activer, vous ne pouvez pas utiliser CSS, mais vous pouvez utiliser javascript. J'ai changé l'attribut href du lien pour qu'il soit id de l'élément à basculer. Vous pouvez également utiliser un attribut data-* à la place si vous souhaitez laisser la valeur href seule ou la remplacer par autre chose.

$('.services-list a').hover(function() { 
 
    $($(this).attr('href')).stop().fadeToggle(); 
 
})

.description { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s"> 
 
    <h2>Services</h2> 
 
    <ul class="services-list flex"> 
 
     <li id="item-1" class="wow fadeIn" data-wow-delay="1s"> 
 
     <h5><a href="#description-1">Lighting System Design</a></h5> 
 
     <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign"> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!--Description div i want to appear when hover on #item-1--> 
 
    <div class="description col-md-6 header-left wow fadeIn" id="description-1"> 
 
     <h4>Lighting System Design</h4> 
 
     <p>Determining the equipment and programing required that meet interior anenter code hered exterior lighting specifications.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Vous pouvez le faire en utilisant jQuery mouseover et mouseleave fonction. Vérifiez l'extrait ci-dessous.

$('#item-1').on('mouseover', function() { 
 
    $('#description-1').fadeIn("fast"); 
 
}).on('mouseleave', function() { 
 
    $('#description-1').fadeOut("fast"); 
 
});

#description-1 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s"> 
 
     <h2>Services</h2> 
 
     <ul class="services-list flex"> 
 
     <!--Hover this list item for description div to appear--> 
 
     <li id="item-1" class="wow fadeIn" data-wow-delay="1s"> 
 
      <h5><a href="#">Lighting System Design</a></h5> 
 
      <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign"></div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--Description div i want to appear when hover on #item-1--> 
 
    <div class="col-md-6 header-left wow fadeIn" id="description-1"> 
 
     <h4>Lighting System Design</h4> 
 
     <p>Determining the equipment and programing required that meet interior anenter code hered exterior lighting specifications.</p> 
 
    </div> 
 
    </div> 
 
</div>