悬停在父元素上但不在子元素上答案

【问题标题】：Hover on parent but not on child element悬停在父元素上但不在子元素上
【发布时间】：2019-12-22 14:26:42
【问题描述】：

我有一个问题，当我将鼠标悬停在容器上时，我想在链接上激活悬停状态，但两个按钮 save 和 close 除外。首选 CSS 方法，但如果不是原生 JavaScript 也可以。请看看我创建了一个codepen

【问题讨论】：

您可以在链接here中找到此解决方案/方法
这也不符合我的要求。因为我想在链接上激活悬停效果。悬停一个 div 元素很容易，但其中有一个链接。如果链接是访问过的链接，则该链接会获得不同的背景和颜色。
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

【解决方案1】：

您不能触发伪事件。当框悬停时，您可以为其赋予相同的样式：

.box {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  transition: background .3s ease-in-out;

  &:hover {
    background: #f1f1f1;
    a {
      color: #525199;
      background-color: #e6e6f0;
      border-color: #525199;
    }
  }

【讨论】：

这种方法的问题是我不希望在悬停在Save 或Cancel 按钮上时悬停在link 上，这就是挑战。

【解决方案2】：

这对于纯 CSS 是不可能的，正如问题 How to style the parent element when hovering a child element? 中所解释的那样

因此，解决方案是添加一些 Javascript 来设置父元素的样式，例如向父元素添加一个类。使用您的解决方案实现此目的的简单代码 sn-p 如下：

document.querySelectorAll('.save, .cancel').forEach(function(button) {
  button.addEventListener("mouseover", function() {
    button.parentNode.parentNode.className = 'box nohover';
  });
  button.addEventListener("mouseout", function() {
    button.parentNode.parentNode.className = 'box';
  });
});

然后你需要通过不改变背景来设置 {{nohover}} 类的样式：

.nohover:hover {
  background: none;
}

See this codepen for a working demo.

【讨论】：

【解决方案3】：

试试这个：

.box:hover :not(.box--right):hover a {
    color: #525199;
    background-color: #e6e6f0;
    border-color: #525199;
}

【讨论】：