html - 如何分离按钮上的双悬停？

Question

不知道有没有类似的帖子，但是没找到。

我的按钮上有两个悬停事件。我想要实现的是:当我悬停除关闭以外的所有内容时，整个按钮(关闭除外)变为灰色，当我悬停关闭时，它(仅)变为黑色。

如您所见，当我将鼠标悬停在 close(红色)上时，会出现两次悬停。按钮变为灰色，close 变为黑色。我需要将这两个悬停分开。

Live example

代码:

HTML

<div class="panel">
  <div class="btn">
    <span class="text">Description 1</span>
    <div class="close"></div>
  </div>

  <div class="btn">
    <span class="text">Description 2</span>
    <div class="close"></div>
  </div>

</div>

CSS

.panel {
  display: flex;
  flex-direction: row;
}

.btn {
  display: flex;
  width: 120px;
  height: 20px;
  border: 2px solid black;
  margin-left: 10px;
}

.btn:hover {
  background: rgba(189, 195, 199, 1)
}

.close {
  width: 30px;
  height: 100%;
  background: red;
  justify-content: flex-end;
}

.close:hover {
  background: black;
}

Answer 1

您可以在关闭按钮中使用伪元素来隐藏父悬停时的黑色背景:

.panel {
  display: flex;
  flex-direction: row;
}

.btn {
  display: flex;
  width: 120px;
  height: 20px;
  border: 2px solid black;
  margin-left: 10px;
  position:relative;
  z-index:0;
}

.btn:hover {
  background: rgba(189, 195, 199, 1)
}

.close {
  width: 30px;
  height: 100%;
  background: red;
  justify-content: flex-end;
}

.close:hover {
  background: black;
}
.close:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
}

<div class="panel">
  <div class="btn">
    <span class="text">Description 1</span>
    <div class="close"></div>
  </div>
  
  <div class="btn">
    <span class="text">Description 2</span>
    <div class="close"></div>
  </div>

</div>