非JS实现：悬停按钮切换图片，悬停分隔符取消悬停效果

没问题，咱们可以通过调整HTML结构和CSS伪类组合来搞定这个需求，完全不需要JavaScript。核心思路是给分隔符单独加个可选中的元素，然后利用CSS的状态判断，让只有鼠标悬停在分隔符之外的区域时，才触发图片和链接的样式变化；当悬停在分隔符上时，直接重置回初始状态。

第一步：优化HTML结构 #

先把原本的纯文本“SEPARATOR”包裹在<span>标签里，并添加类名separator，这样我们能精准定位到这个元素：

<div id="my-thumbnail-link" class="vcenter-parent">
  <img class="vcenter-child">
  <span class="separator">SEPARATOR</span>
  <a href="#potato" class="vcenter-child">Some Link</a>
</div>

第二步：编写CSS逻辑 #

我们需要实现两个核心规则：

1. 当父容器#my-thumbnail-link被悬停，且没有悬停在分隔符上时，切换图片背景和链接样式；
2. 当悬停在分隔符上时，强制重置图片和链接为初始样式。

这里用现代主流浏览器都支持的:has()伪类来实现精准状态判断，代码如下：

.vcenter-parent {
  display: flex;
  justify-content: center;
  gap: 8px; /* 给元素间加一点间距，视觉更友好 */
}

.vcenter-child {
  align-self: center;
}

#my-thumbnail-link img {
  background: url("img") no-repeat;
  width: 32px;
  height: 32px;
}

/* 仅当父容器悬停且分隔符未被悬停时，切换图片背景 */
#my-thumbnail-link:hover:not(:has(.separator:hover)) img {
  background: url("img1") no-repeat;
}

#my-thumbnail-link a {
  color: gray;
  text-decoration: none; /* 可选：去掉默认下划线 */
}

/* 仅当父容器悬停且分隔符未被悬停时，改变链接样式 */
#my-thumbnail-link:hover:not(:has(.separator:hover)) a {
  color: blue;
  font-weight: bold;
}

/* 可选：给分隔符添加hover视觉反馈 */
.separator {
  cursor: default; /* 表明这是不可点击的元素 */
}

逻辑解释 #

• :hover:not(:has(.separator:hover))：这个组合伪类的意思是「当父元素处于悬停状态，且内部的.separator元素没有被悬停时」，才应用后续样式；
• 当鼠标移到分隔符上时，:has(.separator:hover)条件成立，:not()会排除这个状态，图片和链接就会保持初始样式，相当于“取消悬停状态”；
• 设置cursor: default是为了让用户明确知道这个区域不可交互，提升体验。

如果需要兼容不支持:has()的旧浏览器，我们可以用兄弟选择器来实现兼容方案（要求分隔符在HTML结构中位于图片和链接之前）：

/* 旧浏览器兼容方案 */
#my-thumbnail-link:hover img {
  background: url("img1") no-repeat;
}
#my-thumbnail-link:hover a {
  color: blue;
  font-weight: bold;
}

/* 当悬停分隔符时，重置图片和链接样式 */
#my-thumbnail-link .separator:hover ~ img {
  background: url("img") no-repeat;
}
#my-thumbnail-link .separator:hover ~ a {
  color: gray;
  font-weight: normal;
}

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