jQuery hover()函数使div内所有a标签变色，而非仅hover的单个标签

嘿，这个问题很常见，咱们来快速搞定它！

问题根源 #

你当前的代码里，hover事件触发时，选择器$("#spread-out-menu a")会选中所有在#spread-out-menu下的a标签，所以不管你hover哪一个，所有链接都会一起变色。

jQuery解决方案 #

只需要把选中所有a标签的代码，改成指向当前触发hover事件的那个元素就行——用$(this)就可以精准定位到当前hover的a标签：

$(document).ready(function(){
  $("#spread-out-menu a").hover(function(){
    // 仅修改当前hover的a标签颜色
    $(this).css("color", "black");
  }, function(){
    // 鼠标离开时恢复当前元素的颜色
    $(this).css("color", "#C10000");
  });
});

额外推荐：用CSS实现更高效 #

其实这种简单的hover样式变化，用纯CSS就能实现，不需要jQuery，性能更好也更简洁：

#spread-out-menu a {
  color: #C10000; /* 默认颜色 */
}

#spread-out-menu a:hover {
  color: black; /* hover时的颜色 */
}

这样写的话，完全不需要JS代码，浏览器原生支持，运行更流畅～

内容的提问来源于stack exchange，提问作者Ghadir