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

Question

这是我的HTML文档中的代码。我一直在尝试让这个悬停动作工作，到目前为止，我只在描述是 li 标签的子级时才让它工作，这不是我想要的。我希望将描述显示为单独的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

由于您要显示的元素不与要切换的元素相邻或内部，因此不能使用 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>

Answer 2

你可以

通过使用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>