将CSS样式应用于：悬停到另一个元素[重复]答案

【问题标题】：Apply CSS style on :hover to another element [duplicate]将CSS样式应用于：悬停到另一个元素[重复]
【发布时间】：2021-12-03 21:32:56
【问题描述】：

所以我正在寻找一种方法，可以在悬停另一个元素时将 CSS 样式应用于一个元素。

为了更好的说明，这里举个例子：

HTML：

<body>
    <p>Click me</p>
</body>

CSS：

p:hover{
    background-color: red;
}

所以基本上我希望当 p 悬停时，body 的背景颜色为红色。

【问题讨论】：

CSS 不支持。 :has 伪类会这样做：body:has(p:hover) { background-color: red; }。遗憾的是，任何浏览器尚不支持它。

标签： css hover

【解决方案1】：

使用简单的 JavaScript，您可以非常轻松地实现这一目标。

const clickEl = document.getElementById("click-para");
clickEl.addEventListener("mouseenter", () => {document.body.style.backgroundColor = "red";})
clickEl.addEventListener("mouseleave", () => {document.body.style.backgroundColor = "white";})

&lt;p id="click-para"&gt;Click Me&lt;/p&gt;

【讨论】：

改变背景的目标应该是页面的主体，而不仅仅是p标签。万一你想试试这个，就需要修改代码。
啊 - 谢谢你发现我的错误！更新了我的答案。

【解决方案2】：

我知道在没有任何额外插件的情况下最快的方法是使用 jQuery。

检查以下示例：

$("#action").mouseenter(function() {
  $('body').css('background-color', 'red');
});

$("#action").mouseleave(function() {
  $('body').css('background-color', 'white');
});

body{
  transition: background 0.7s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
      <p id='action'>Click me</p>
  </body>
<html>

我在 'p' 元素中添加了一个 ID，以便从 JS 代码中引用它。

您会注意到 css 中的过渡只是为了平滑颜色变化动画。

【讨论】：