隐藏多个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>