如何在单独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

回答

相关问题