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

这是我在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>

最佳答案

由于要显示的元素不与要切换的元素相邻或不位于元素内，因此不能使用CSS，但可以使用javascript。我将链接的href属性更改为要切换的元素的id。如果您想单独保留data-*值或将其更改为其他值，也可以使用href属性。

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