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

Posted 2023-03-06

【中文标题】元素上的悬停效果在 CSS 中不起作用 [重复]

【英文标题】：Hover effect on element is not working in CSS [duplicate]

【发布时间】：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>

【参考方案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>