Question

我遇到一个问题，当我将鼠标悬停在容器上的任意位置（除了两个按钮save和close之外时，我想激活链接的悬停状态。最好使用CSS方法，但如果没有，最好使用JavaScript。请看看我是否创建了codepen

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

Answer 2

对于纯CSS不可能做到这一点，如问题How to style the parent element when hovering a child element?

所述

然后，解决方案是添加一些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;
}

See this codepen for a working demo。

Answer 3

尝试一下：

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

将鼠标悬停在父元素上，而不悬停在子元素上

3 个答案: