隱藏多個div，直到將單個鏈接懸停在鼠標上，然后顯示每個

Question

我有以下HTML代碼...

<div class="circles">
<ul>
    <li><a id="links" href="#" class="first links">Supply
Chain</a></li>
    <li><a id="links" href="#" class="links">Quality
Control</a></li>
    <li><a id="links" href="#" class="links">Manufacturing
</a></li>
    <li><a id="links" href="#" class="links">Material
Handling</a></li>
</ul>
</div>
<div id="supply" class="circletext">
<h2 style="text-align: center;">OUR CAPABILITIES</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>

</div>
<div id="quality" class="circletext">
<h2 style="text-align: center;">Quality Control</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>


</div>
<div id="manufacturing" class="circletext">
<h2 style="text-align: center;">Manufacturing</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>

</div>
<div id="material" class="circletext">
<h2 style="text-align: center;">Material Handling</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>

</div>

我需要具有要隱藏的類.circletext的div才能開始。 然后，我需要隨時將其相應的div顯示的鏈接#links之一懸停。 因此，如果第一個供應鏈鏈接被懸停，那么div ID #supply將顯示。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.circletext').hide();
});

jQuery(document).ready(function() {
    jQuery('#links').hover(function() {
        jQuery(this).find('.circletext').show();
        },
    function() {
        jQuery('.circletext').hide();
        });
});
</script>

我知道我需要添加一些特定的ID或類。 只需一些幫助就可以了（如果他們也可以提供淡入淡出效果）。

Answer 1

在您的文檔就緒處理程序中放入以下代碼：

$(document).on('hover', '#links', function(){ //or mouseover?
  //do something
  $('#supply').show();
});

編輯：

不知道on.'hover'是否會觸發...

您也可以嘗試：

$('#links).mouseover(function(){ //or mouseover?
  //do something
  $('#supply').show();
});

Answer 2

檢查JSFiddle：- 在此處輸入鏈接描述

 jQuery('.circletext').hide();

 $( ".links" ).hover( function() {
   if(this.id == 'links1'){
      $("#quality").hide();
      $("#manufacturing").hide();
      $("#material").hide();
      $("#supply").show();
   }
   if(this.id == 'links2'){
       $("#supply").hide();
       $("#manufacturing").hide();
       $("#material").hide();
       $("#quality").show();
   }
   if(this.id == 'links3'){
      $("#supply").hide();
      $("#material").hide();
      $("#quality").hide();
      $("#manufacturing").show();
   }
   if(this.id == 'links4'){
     $("#supply").hide();
     $("#manufacturing").hide();
     $("#quality").hide();
     $("#material").show();
   }
});

Answer 3

使用此代碼........

 jQuery(document).ready(function(){ jQuery('.circletext1').hide(); jQuery('.circletext2').hide(); jQuery('.circletext3').hide(); jQuery('.circletext4').hide(); jQuery('#links1').hover(function() { jQuery('.circletext1').show(); jQuery('.circletext2').hide(); jQuery('.circletext3').hide(); jQuery('.circletext4').hide(); }); jQuery('#links2').hover(function() { jQuery('.circletext2').show(); jQuery('.circletext1').hide(); jQuery('.circletext3').hide(); jQuery('.circletext4').hide(); }); jQuery('#links3').hover(function() { jQuery('.circletext3').show(); jQuery('.circletext1').hide(); jQuery('.circletext2').hide(); jQuery('.circletext4').hide(); }); jQuery('#links4').hover(function() { jQuery('.circletext4').show(); jQuery('.circletext1').hide(); jQuery('.circletext2').hide(); jQuery('.circletext3').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="circles"> <ul> <li><a id="links1" href="#" class="first links">Supply Chain</a></li> <li><a id="links2" href="#" class="links">Quality Control</a></li> <li><a id="links3" href="#" class="links">Manufacturing </a></li> <li><a id="links4" href="#" class="links">Material Handling</a></li> </ul> </div> <div id="supply" class="circletext1"> <h2 style="text-align: center;">OUR CAPABILITIES</h2> <p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a> Click here to read more about our capabilities</a> or select a service below.</p> </div> <div id="quality" class="circletext2"> <h2 style="text-align: center;">Quality Control</h2> <p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a> Click here to read more about our capabilities</a> or select a service below.</p> </div> <div id="manufacturing" class="circletext3"> <h2 style="text-align: center;">Manufacturing</h2> <p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a> Click here to read more about our capabilities</a> or select a service below.</p> </div> <div id="material" class="circletext4"> <h2 style="text-align: center;">Material Handling</h2> <p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a> Click here to read more about our capabilities</a> or select a service below.</p> </div>