将鼠标悬停在单独的div中的列表项上时如何显示“ col-md-6” div

Question

Here is the code i have on my HTML doc. I have been trying to get this hover action to work, i have only gotten it to work so far when the description is a child of the li tag, which is not what i want. I want the description to be shown as a separate div.

              <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

Since the element you want to display isn't adjacent to or inside of the element you want to toggle, you can't use CSS, but you can use javascript. I changed the href attribute of the link to be the id of the element to toggle. You could also use a data-* attribute instead if you wanted to leave the href value alone or change it to something else.

 $('.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

You can do this by using jQuery mouseover and mouseleave function. Check below snippet.

 $('#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>