Question

我想要完成的是将div内的元素悬停时影响div。

按照下面的代码，我希望在悬停输入字段#Container时影响外部分隔#Input。

我尝试过this solution，但是我却无法完成我想要的。

div {
  outline: 1px solid blue;
}

#Container {
  width: 400px;
  height: 33px;
  background: grey;
  position: absolute;
}

#Input {
  width: 30px;
  height: 100%;
  background-color: red;
  position: absolute;
}

/* #Input:hover "affects" #Container {
    border-color: blue;
  }
 */

<html>
<div class="Container" id="Container">
  <input class="Input" id="Input" type="Text">
</div>
</html>

Answer 1

有点笨拙，但是您无需使用JavaScript即可实现此目标。查看以下解决方案：How to style the parent element when hovering a child element?

<div class="Container" id="Container">
     <input class="Input" id="Input" type="Text">
     <div class="fill">
     </div>
</div>

#Container {
    width: 400px;
    height: 33px;
    background: grey;
    position: relative;
    display:flex;

}
#Input {
    width: 30px;
    height: 100%;
    background-color: red;
}
.fill {
    width:100%;
}
.fill:hover {
    background:gray;
}
#Container:hover {
    background:blue;
}

https://jsfiddle.net/n8fzu6jb/

Answer 2

在大多数情况下，您不能使用css影响以孩子为基础的父母。在这种情况下，您可以通过这种方式为父级禁用指针事件，为子级启用指针事件。不幸的是，这确实使Container没有指针事件。

div {
  border: 1px solid grey;
}

#Container {
  padding: 50px;
  pointer-events: none;
}

#Container:hover {
  background: #E7E;
}

#Target {
    pointer-events: all;
}

<div id="Container">
  <div id="Target">Hover Me</div>
</div>

或者，您可以使用js在悬停时向父级添加/删除类。

const target = document.getElementById("Target");
target.addEventListener("mouseenter", () => target.parent.classList.add("--hover_inside"));
target.addEventListener("mouseleave", () => target.parent.classList.remove("--hover_inside"));

Answer 3

好吧，实际上没有办法使用纯CSS来实现这一点，但是您可以做一些小技巧，使其表现得像可以使用CSS来实现...让我解释一下。

#Input 在 #Container 内部，因此您将在 #Container 上设置悬停事件。
您将 #Container 上的指针事件设置为无
并将 #Input 上的指针事件设置为自动

因此CSS应该如下所示：

    div {
      outline: 1px solid blue;
    }

    #Container {
      width: 400px;
      height: 33px;
      background: grey;
      position: absolute;
      pointer-events: none;
    }

    #Input {
      width: 30px;
      height: 100%;
      background-color: red;
      position: absolute;
      pointer-events: auto;
    }

    #Container:hover {
      background: blue;
    }

https://jsfiddle.net/40g9zv1L/

这是一种解决方法，但不是完美的解决方法。

悬停在元素内部时如何影响元素

3 个答案: