元素上的悬停效果在 CSS 中不起作用 [重复]答案

【问题标题】：Hover effect on element is not working in CSS [duplicate]元素上的悬停效果在 CSS 中不起作用 [重复]
【发布时间】：2021-01-18 19:18:19
【问题描述】：

当我将鼠标悬停在 box1 上时，我试图更改 box2 的颜色，但它不起作用。请帮助我为什么这不起作用。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

【问题讨论】：

标签： html css

【解决方案1】：

.box1:hover .box2 将鼠标悬停在 box1 上时，会针对 within box1 的所有元素。

但是，您希望将元素 next 定位到 box1。所以你可以改用+ 符号！

+ 符号指向第一个元素之后的元素。

所以请改成.box1:hover + box2

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover + .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

【讨论】：

【解决方案2】：

您只需在hover 之后添加~

.box1:hover ~ .box2 {
        background-color: green;
      }

【讨论】：

【解决方案3】：

.box1:hover .box2 表示.box2 选择器，悬停时包含在.box1 中。所以没有选择器。

在您的情况下，您应该使用.box1:hover ~ .box2，它表示.box2 选择器旁边的.box1 选择器。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1, .box2{
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: teal;
/*   position:relative; */
}
.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover ~ .box2{
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

【讨论】：

【解决方案4】：

您需要使用 + 选择器来访问同级。您的代码正在寻找 box2 作为子元素

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover + .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

【讨论】：