jQuery为.a类元素绑定hover事件时toggleClass不生效问题

问题现象 #

使用jQuery实现链接悬停时为.cursor2、.cursor1元素切换increase-size类的交互，当前代码中.et_pb_button、#cursor-button、.toggle-sub-menu选择器匹配的元素均可正常触发效果，唯独.a选择器对应的元素悬停时无响应，原有实现代码如下：

$('.et_pb_button, #cursor-button, .toggle-sub-menu, .a').hover(function(){
  $('.cursor2,.cursor1').toggleClass('increase-size');
});

故障原因 #

• 选择器语法错误：.a是类选择器，仅匹配带有class="a"属性的元素。如果你原本的目标是选中所有<a>链接标签，属于选择器写法混淆——标签选择器直接写标签名a即可，前面不需要加类选择器标识.，这是该问题最高发的原因。
• 元素匹配失败：如果确实要选中class为a的元素，需检查目标元素的class属性是否存在拼写错误、多余空格，导致选择器无法命中对应节点。
• 动态元素未绑定事件：如果.a对应的元素是jQuery代码执行完成后，通过异步请求、其他JS脚本动态插入到页面的，直接用.hover()绑定的事件仅对绑定时刻已存在的DOM元素生效，后续新增的元素不会绑定上事件。
• 元素被遮挡：如果目标元素上方有其他设置了更高z-index的定位元素（比如透明遮罩、其他定位层），鼠标实际悬停的是遮挡层，没有触发目标元素的hover事件。

修复方案 #

1. 如果目标是选中所有<a>标签，直接修正选择器即可，修正后代码：

$('.et_pb_button, #cursor-button, .toggle-sub-menu, a').hover(function(){
  $('.cursor2,.cursor1').toggleClass('increase-size');
});

2. 如果目标确实是class为a的元素：
   • 先通过浏览器开发者工具检查目标元素的class属性，确认类名拼写正确、选择器可以命中元素
   • 如果是动态生成的元素，改用事件委托的方式绑定事件，兼容后续动态插入的节点：

   // 可将document替换为目标元素的固定父级元素，性能更好
   $(document).on('mouseenter mouseleave', '.et_pb_button, #cursor-button, .toggle-sub-menu, .a', function(){
     $('.cursor2,.cursor1').toggleClass('increase-size');
   });
   

   • 检查元素层级，移除不必要的遮挡层，或调整z-index保证鼠标事件可以正常触发到目标元素。

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