Отдельная кнопка: активна от parentDiv: Активна - PullRequest
Новая
       6

Отдельная кнопка: активна от parentDiv: Активна

0 голосов
/ 04 июля 2018

Я пытаюсь получить кнопку внутри div. Когда кнопка нажата, тень блока исчезает, а когда нажимается родительский элемент div, тень блока также должна исчезать.

Проблема в том, что когда я нажимаю кнопку, тень родительского div тоже исчезает, что не должно быть

Например: 

<div class="parent">
    <img>
    <h1></h1>
    <p></p>
    <button></button>
</div>

Стиль: 

.parent {
    box-shadow: 0 2px 10px 0 @color;
   //some styling

    button {
        box-shadow: 0 2px 10px 0 @color;
    }

    button:active{
        box-shadow: none;
    }
}

.parent:active{
    box-shadow: none;
}

Как может быть достигнуто разделение? Я использую меньше и до сих пор пытался изменить z-index

Что мне пришло в голову, так это возможность повторного применения тени блока, если оба класса активны, но я не знаю, возможно ли это, и если да, то как выглядит селектор.

Я предпочитаю решение без js, которое основано исключительно на CSS.

1 Ответ

0 голосов
/ 04 июля 2018

И идея состоит в том, чтобы использовать другой элемент для создания тени. Это будет брат кнопки, и у вас больше не будет проблем: 

.parent {
  padding:20px;
  text-align:center;
  position:relative;
}
.parent .shadow  {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow: 0 2px 10px 0 red;
}

button {
  box-shadow: 0 2px 10px 0 red;
  position:relative;
  z-index:2;
}

button:active {
  box-shadow: none;
}

.parent .shadow:active {
  box-shadow: none;
}
<div class="parent">
  <h1>a title</h1>
  <p>some text</p>
  <button>a button</button>
  <span class="shadow"></span>
</div>
...