JavaScript能否嵌套使用querySelectorAll？反应系统悬停问题求助

原代码的核心问题 #

1. 选择器错误：.post__action--reaction.container试图匹配同时拥有这两个类的元素，但实际点赞按钮（.post__action--reaction）和反应容器（.container）是<div class="post__actions-inner">下的兄弟元素，并非同一个元素。
2. 逻辑冗余且错误：不需要给容器绑定mouseenter事件，我们要实现的是鼠标悬停点赞按钮时显示容器，而非悬停容器时做操作。
3. 变量赋值无效：document.querySelectorAll('.container').forEach(...)返回的是undefined，所以container变量根本不是DOM元素，无法调用style.display。

修复后的代码实现 #

场景1：单条帖子的反应面板

如果页面只有这一个帖子的反应系统，可以直接通过ID或相对选择器获取元素：

// 获取点赞按钮和对应的反应容器
const likeBtn = document.getElementById('default-like-2288');
const reactionContainer = document.getElementById('act-reactions');

// 鼠标进入点赞按钮时显示容器
likeBtn.addEventListener('mouseenter', () => {
  reactionContainer.style.display = 'block';
});

// 可选：鼠标离开按钮或容器时隐藏面板
function hideReactionPanel() {
  reactionContainer.style.display = 'none';
}
likeBtn.addEventListener('mouseleave', hideReactionPanel);
reactionContainer.addEventListener('mouseleave', hideReactionPanel);

场景2：多条帖子的反应系统（更通用）

如果页面有多个帖子，需要通过父元素关联每个按钮和对应的容器：

// 遍历所有点赞按钮
document.querySelectorAll('.post__action--reaction').forEach(likeBtn => {
  // 通过父元素找到对应的反应容器（兄弟元素）
  const reactionContainer = likeBtn.previousElementSibling;
  
  likeBtn.addEventListener('mouseenter', () => {
    reactionContainer.style.display = 'block';
  });

  // 隐藏逻辑
  function hidePanel() {
    reactionContainer.style.display = 'none';
  }
  likeBtn.addEventListener('mouseleave', hidePanel);
  reactionContainer.addEventListener('mouseleave', hidePanel);
});

额外优化建议 #

• 初始状态下给.container添加CSS样式display: none;，确保默认隐藏
• 可以用CSS的:hover伪类配合兄弟选择器实现纯CSS方案（不需要JS），更简洁：

.post__actions-inner .container {
  display: none;
}
.post__actions-inner .post__action--reaction:hover + .container,
.post__actions-inner .container:hover {
  display: block;
}

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