Javascript 将光标悬停在父元素上，但不悬停在子元素上

我有一个问题，当我将鼠标悬停在容器上的任意位置时，除了两个按钮

save

和

close

之外，我想激活链接上的悬停状态。CSS方法是首选，但如果不是香草JavaScript就可以了。请看我已经创建了一个

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

.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;
    }
  }

---

这在纯CSS中是不可能的，正如在问题上解释的那样

然后，解决方案是添加一些Javascript来设置父元素的样式，例如通过向父元素添加类。使用您的解决方案实现这一点的简单代码片段如下：

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;
}

.

试试这个：

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

---

这种方法的问题是，我不希望在

保存

或

取消

按钮上悬停时将状态悬停在

链接

，这是一个挑战。您可以在链接中找到不符合我要求的解决方案/方法。因为我想激活链接上的悬停效果。悬停div元素很容易，但是其中有一个链接。因为如果链接是已访问的链接，则会得到不同的背景和颜色。寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看见