如何在單獨div中的列表項上懸停時顯示「col-md-6」div

這是我在HTML文檔中的代碼。我一直在試圖讓這個懸停動作起作用，當描述是li標籤的一個孩子時，我只得到它的工作，這不是我想要的。我想將描述顯示爲單獨的div。如何在單獨div中的列表項上懸停時顯示「col-md-6」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>

來源

2017-06-12 daniel

既然你要顯示的元素不相鄰，或者你想切換的元素裏面，你不能使用CSS，但你可以使用JavaScript。我將鏈接的href屬性更改爲要切換的元素的id。如果您想單獨保留href值或將其更改爲其他值，您也可以使用data-*屬性。

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

來源

2017-06-12 18:11:13

您可以通過使用jQuery mouseover和mouseleave功能做到這一點。檢查下面的代碼段。

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

來源

2017-06-12 18:18:48 Bhuwan

如何在單獨div中的列表項上懸停時顯示「col-md-6」div

回答

相關問題