javascript - 隐藏多个 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 才能开始。然后，我需要随时悬停其中一个链接 #links，以显示其相应的 div。因此，如果悬停第一个供应链链接，则会显示 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

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

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>