CSS 将背景颜色应用于悬停时的 div，但仅当链接悬停时

Question

我试图在 div 中的链接悬停时更改其背景颜色。

.link {
    padding:50px;
    border: 1px solid black;
}

.link:hover {
    background:red;
}

<div class="container">
    <div class="link">
        <a href="example.com">This is the link</a>
    </div>
</div>

目前，只要我进入linkdiv，它就会应用悬停。有没有办法只在我位于文本上方时应用悬停，但仍将背景悬停颜色应用于整个 div？

Answer 1

一些指针事件技巧可以做到这一点

.link {
  padding: 50px;
  border: 1px solid black;
  pointer-events: none; /* disable on the div */
}

.link a {
  pointer-events: initial; /* re-enable for only the link */
}

.link:hover {
  background: red;
}

<div class="container">
  <div class="link">
    <a href="example.com">This is the link</a>
  </div>
</div>