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

【问题标题】：How to have "col-md-6" div appear when hovering over list items in separate div将鼠标悬停在单独 div 中的列表项上时如何显示“col-md-6”div
【发布时间】：2017-06-12 18:06:41
【问题描述】：

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

【问题讨论】：

标签： jquery html css twitter-bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

您可以通过使用 jQuery mouseover 和 mouseleave 函数来做到这一点。检查下面的sn-p。

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

【讨论】：