jQuery hover() 函数为div 内的所有'a'标签着色，而不仅仅是悬停在上面的标签

Question

>我有一个导航菜单，菜单项带有"a"标签。我想在使用 jQuery 将鼠标悬停在"a"标签上时指定悬停颜色(黑色(。问题是，当我将鼠标悬停在jQuery上时，jQuery会让所有"a"标签变黑，而不仅仅是我悬停的一个标签。

/*specifies hover color of items in main menu*/
$(document).ready(function(){    
$("#spread-out-menu a").hover(function(){
$("#spread-out-menu a").css("color", "black");
}, function(){
$("#spread-out-menu a").css("color", "#C10000");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spread-out-menu">
<h3><a href="#">Industries</a></h3>
<h3><a href="#">Services</a></h3>
<h3><a href="#">About Us</a></h3>
<h3><a href="#">Insights</a></h3>
<h3><a href="#">Careers</a></h3>
<h3><a href="#">Contact Us</a></h3>
</div>

请注意，我已经应用了一些css(链接的颜色(，并且我正在用jQuery覆盖它。我应该怎么做才能使悬停效果一次应用于一个元素？

Answer 1

使用$(this)仅对悬停的元素生效。

$(document).ready(function() {
$("#spread-out-menu a").hover(function() {
$(this).css("color", "black");
}, function() {
$(this).css("color", "#C10000");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spread-out-menu">
<h3><a href="#">Industries</a></h3>
<h3><a href="#">Services</a></h3>
<h3><a href="#">About Us</a></h3>
<h3><a href="#">Insights</a></h3>
<h3><a href="#">Careers</a></h3>
<h3><a href="#">Contact Us</a></h3>
</div>