无需子元素实现Tooltip的方法及使div作为Tooltip显示的CSS代码咨询

一、CSS能否实现悬停非子元素时修改另一个元素样式？ #

可以，但有严格的结构限制：CSS选择器只能向下/向后遍历DOM结构，无法向上跳级。

• 若两个元素是相邻兄弟（紧挨着），可用+选择器；
• 若两个元素是同层级的后续兄弟（不要求紧挨着），可用~选择器；
• 但如果目标元素是触发元素的父级兄弟（比如你的示例中，<a>在<p>内，.tooltip是<p>的同级元素），纯CSS无法实现跨级关联，这就是你用逗号、加号选择器无效的原因。

二、JS配合的Tooltip CSS实现方案 #

既然用JS处理mouseover/mouseout事件控制显示，CSS主要负责Tooltip的定位、层级和视觉样式，代码如下：

/* Tooltip基础样式 */
.tooltip {
  /* 默认隐藏 */
  display: none;
  /* 绝对定位，脱离文档流不破坏原有布局 */
  position: absolute;
  /* 最高层级，覆盖所有页面元素 */
  z-index: 9999;
  /* 自定义视觉样式，可按需调整 */
  background-color: #2d2d2d;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  /* 避免Tooltip遮挡鼠标事件，导致hover逻辑异常 */
  pointer-events: none;
  /* 可选：添加阴影增强层次感 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Tooltip显示状态类，由JS控制添加/移除 */
.tooltip.show {
  display: block;
}

配合的核心JS逻辑（供参考） #

const hoverLink = document.querySelector('.tooltiphover');
const tooltip = document.querySelector('.tooltip');

hoverLink.addEventListener('mouseover', (e) => {
  // 获取<a>标签的实时位置信息
  const linkRect = e.target.getBoundingClientRect();
  // 将Tooltip定位到<a>标签的下方偏左位置
  tooltip.style.top = `${linkRect.bottom + window.scrollY}px`;
  tooltip.style.left = `${linkRect.left + window.scrollX}px`;
  tooltip.classList.add('show');
});

hoverLink.addEventListener('mouseout', () => {
  tooltip.classList.remove('show');
});

关键CSS属性说明 #

• position: absolute：让Tooltip脱离正常文档流，不会挤压或打乱原有页面布局；
• z-index: 9999：确保Tooltip层级高于所有页面元素，若页面已有更高层级元素，可适当调高数值；
• pointer-events: none：禁止Tooltip响应鼠标事件，避免它遮挡住<a>标签导致mouseout事件误触发。

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