使用jQuery实现多元素Hover状态联动问题求助

我看了你的代码，发现两个关键问题导致后续悬停功能失效：

问题1：选择器拼写错误 #

在第二个hover事件的离开回调里，你写了$('one')，这里漏掉了ID选择器的#，正确写法应该是$('#one')。这个错误会导致鼠标离开#three时，无法清除#one的阴影样式，直接影响后续交互逻辑。

问题2：内联样式覆盖CSS hover规则 #

你用css()方法直接给元素设置内联的box-shadow，而内联样式的优先级比CSS中的:hover伪类更高。当JS设置了内联样式后，原生的CSS hover效果会被覆盖，导致后续鼠标直接悬停在元素上时，无法触发预期的阴影效果。

修复方案：用CSS类控制联动样式 #

推荐用添加/移除类的方式实现联动，既避免内联样式的优先级冲突，也让代码更易维护：

1. 修改CSS，新增联动悬停类 #

#one, #two, #three {
  position: absolute;
  height: 100px;
  width: 100px;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
  margin-left: 100px;
}
#three {
  background-color: blue;
  margin-left: 200px;
}
/* 保留原生hover效果 */
#one:hover, #two:hover, #three:hover {
  box-shadow: 0 0 5px 2px black;
}
/* 新增联动类，样式和hover保持一致 */
.link-hover {
  box-shadow: 0 0 5px 2px black;
}

2. 修改JS代码，用类操作替代直接设置CSS #

$(function() {
  $('#one').hover(
    function() {
      $('#three').addClass('link-hover');
    },
    function() {
      $('#three').removeClass('link-hover');
    }
  );

  $('#three').hover(
    function() {
      $('#one').addClass('link-hover');
    },
    function() {
      // 修复选择器错误，加上#
      $('#one').removeClass('link-hover');
    }
  );
});

3. HTML保持不变 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

为什么这样改更靠谱？ #

• 类样式的优先级和原生:hover伪类一致，不会互相覆盖，不管是直接悬停元素还是联动触发，样式都能正常生效。
• 修复了选择器错误，确保鼠标离开时能正确清除联动样式。
• 代码扩展性更强：后续如果要修改阴影样式，只需要调整CSS中的.link-hover类，不用改动JS逻辑。

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