CSS悬停会在属性后用伪造影响另一个元素

Question

以下CSS起作用（在按钮1上悬停时可以看到可见的按钮2），

#btn1:hover ~ #btn2 { visibility: initial;}

但是如果我想为伪元素＃btn2进行相同的操作：之后，以下代码不起作用，

#btn1:hover ~ #btn2:after { visibility: initial;}

是否有原因或解决方法？

Answer 1

可能您需要将 content 属性添加到 btn2

Answer 2

您还可以使用display：none;

使用visibilty：hidden;您的按钮仍将在您的身体元素中具有宽度和高度，但是当使用;您可以将任何元素放在该位置。

body {
  position: relative;
  height: 100vh;
  background-color: bisque;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:1rem;
}
button{
  height: 50px;
  width:100px;
}

#btn2::after{
  content: '';
  width:20px;
  height: 20px;
  background-color: red;
  display: none;
}

#btn1:hover ~ #btn2::after {
   display: inline-block;
}

<button id="btn1">btn1</button>
<button id="btn2">btn2</button>

Answer 3

显然你们都是对的。我做了一些调整，它起作用了...无法弄清楚

我使用了可见性参数出了什么问题