如何在按钮上分离双悬停？答案

【问题标题】：How to separate double hover on button?如何在按钮上分离双悬停？
【发布时间】：2019-06-01 08:41:52
【问题描述】：

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

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

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

代码：

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;
}

【问题讨论】：

标签： html css button hover

【解决方案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>

【讨论】：