個別の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>