1

body {
  margin: 0;
}

header {
  width: 100%;
  height: 700px;
  background-color: rgb(40, 40, 40);
}

div.head {
  display: flex;
  background: url(//picsum.photos/200/300);
  width: 100%;
  height: 100%;
  transition: 1.3s;
}

div.head:hover {
  transform: scale(0.97);
}

.text {
  text-align: center;
}

.text h1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  color: rgb(39, 99, 180);
}
<header>
  <div class="head">

  </div>
  <div class="text">
    <h1>Home</h1>
  </div>
</header>

При наведении на на нижнюю часть изображения hover не срабатывает, с верхней же частью все нормально - анимация работает. Как это можно исправить?

1
  • 2
    добавьте свойство pointer-events: none к h1.
    – Arthur
    4 июл 2018 в 15:31

1 ответ 1

1

если сделать : header:hover .head то работает

body {
  margin: 0;
}

header {
  width: 100%;
  height: 700px;
  background-color: rgb(40, 40, 40);
}

div.head {
  display: flex;
  background: url(//picsum.photos/200/300);
  width: 100%;
  height: 100%;
  transition: 1.3s;
}

header:hover .head {
  transform: scale(0.97);
}

.text {
  text-align: center;
}

.text h1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  color: rgb(39, 99, 180);
}
<header>
  <div class="head">

  </div>
  <div class="text">
    <h1>Home</h1>
  </div>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.