CSS :hover伪类失效：悬停woodMineOwned时tooltip无法显示

你的判断没错——如果woodMineOwned和tipWoodMine不在同一容器（或没有直接的父子/兄弟DOM关系），纯CSS的:hover选择器确实没法直接关联触发元素和tooltip，因为CSS选择器只能在DOM树的层级关系内选择目标元素。

以下是几种可行的解决方法：

方法1：调整DOM结构（推荐，纯CSS实现） #

把tooltip放到触发元素的内部，用后代选择器关联：

<div id="woodMineOwned">
  <!-- 触发元素原有内容 -->
  <div id="tipWoodMine" style="display: none;">木材矿场Tooltip内容</div>
</div>

对应的CSS：

#woodMineOwned:hover #tipWoodMine {
  display: block;
  /* 可补充tooltip定位样式，比如position:absolute、top/left等 */
}

方法2：利用CSS兄弟选择器（适合同级DOM元素） #

如果两个元素是同级关系：

• 若为相邻同级，使用+相邻兄弟选择器：

<div id="woodMineOwned"></div>
<div id="tipWoodMine" style="display: none;"></div>

#woodMineOwned:hover + #tipWoodMine {
  display: block;
}

• 若为非相邻同级，使用~通用兄弟选择器：

#woodMineOwned:hover ~ #tipWoodMine {
  display: block;
}

方法3：JavaScript实现（无DOM结构限制） #

如果无法调整DOM结构，直接通过JS监听鼠标事件控制tooltip显示：

const woodMine = document.getElementById('woodMineOwned');
const tip = document.getElementById('tipWoodMine');

woodMine.addEventListener('mouseenter', () => {
  tip.style.display = 'block';
});

woodMine.addEventListener('mouseleave', () => {
  tip.style.display = 'none';
});

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