使用CSS类选择器时jQuery hover失效，需实现悬停显示与初始隐藏需求

我来帮你搞定这个悬停控制元素可见性的问题！先理清楚你的核心需求：

• 初始状态下隐藏带editIcon类的div
• 当鼠标悬停在带phoneNumberIcon类的div上时，控制editIcon的显示/隐藏
• 之前用类选择器绑定jQuery hover事件没生效，咱们一步步修复

第一步：先通过CSS设置初始隐藏 #

首先确保editIcon初始是隐藏的，直接用CSS搞定最稳妥：

.editIcon {
  display: none; /* 初始隐藏元素 */
}

第二步：修复jQuery hover事件绑定 #

情况1：元素是页面加载时就存在的静态元素

直接绑定hover事件即可，注意选择器要精准，避免误操作其他元素：

$(document).ready(function() {
  // 给所有phoneNumberIcon元素绑定hover事件
  $('.phoneNumberIcon').hover(
    // 鼠标进入时：显示对应的editIcon
    function() {
      // 根据你的DOM结构调整选择器：
      // 若editIcon是子元素用$(this).find('.editIcon')
      // 若editIcon是兄弟元素用$(this).siblings('.editIcon')
      $(this).siblings('.editIcon').show();
    },
    // 鼠标离开时：隐藏对应的editIcon
    function() {
      $(this).siblings('.editIcon').hide();
    }
  );
});

情况2：元素是动态生成的（比如AJAX加载、JS动态添加）

直接绑定hover会失效，因为元素在页面初始化时不存在，这时候要用事件委托：

$(document).ready(function() {
  // 委托给最近的静态父元素（比document更高效）处理mouseenter事件
  $('.static-parent').on('mouseenter', '.phoneNumberIcon', function() {
    $(this).closest('.item-container').find('.editIcon').show();
  });
  
  // 同样处理mouseleave事件
  $('.static-parent').on('mouseleave', '.phoneNumberIcon', function() {
    $(this).closest('.item-container').find('.editIcon').hide();
  });
});

常见问题排查 #

• 检查jQuery是否正确引入：打开浏览器控制台，输入$验证是否能识别jQuery对象
• 选择器是否精准：用$('.phoneNumberIcon')在控制台测试，确认能找到目标元素
• 避免CSS冲突：如果editIcon的display被其他CSS用!important强制覆盖，可改用$(element).css('display', 'block')（根据元素类型调整为inline/inline-block等）

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