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隐藏起来。然后我需要任何时候链接#links之一，其相应的div显示。因此，如果第一个供应链链接悬停，则会显示div #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

在你的doc ready处理程序里面放了这个：

$(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： - 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

使用此代码........

＆＃13;

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();
    });
});

＆＃13;

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

＆＃13;

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

3 个答案: