Как отделить двойное наведение на кнопку? - PullRequest
Новая
       28

Как отделить двойное наведение на кнопку?

0 голосов
/ 06 января 2019

Интересно, есть ли похожая тема, но я не смог ее найти.

На моей кнопке два события при наведении. Чего я хочу добиться, так это: когда я парю все, кроме 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;
}

1 Ответ

0 голосов
/ 06 января 2019

Вы можете использовать псевдоэлемент в кнопке закрытия, чтобы скрыть черный фон на родительском всплывающем окне: 

.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>
...