隐藏多个div，直到将单个链接悬停在鼠标上，然后显示每个

Question

I have the following HTML code...

<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>

I need to have the divs that have the class .circletext to be hidden to start. Then I need anytime one of the links #links to be hovered that its corresponding div shows. So if the first Supply Chain link is hovered then the div id #supply shows up.

<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>

I know I need to add some specific ids or classes. Just some help would be great (and if they could have some fade in fade out effect too).

Answer 1

inside your doc ready handler put this:

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

EDIT:

not sure if the on.'hover' fires...

you could alternatively try:

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

Answer 2

Check The JSFiddle :- enter link description here

 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

use this code ........

 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>