Блог

Главная - Вопросы по программированию - Эффект наведения работает только в элементах проверки

Эффект наведения работает только в элементах проверки

#css #frontend

Вопрос:

Так что у меня не было проблем с этим кодом, но внезапно эффект наведения не отреагировал, когда я навел на него мышь, он реагирует только тогда, когда я нажимаю «Наведение» в элементах проверки. Было бы здорово, если бы мне помогли.

 .box {
  height: 20rem;
  width: 34rem;
  box-shadow: 0px 4px 18px black;
  z-index: -2;
  position: relative;
  margin: 5rem 0;
}

.box::before {
  content: '';
  width: 34rem;
  height: 100%;
  background-color: black;
  position: absolute;
  z-index: -1;
  opacity: 27%;
  transition: all .3s ease-in-out;
}

.box:hover::before {
  opacity: 80%;
} 
 <div class="boxes">
  <h1 class="service-title" style="color: black;">Services</h1>
  <div class="box-content">
    <div class="box box1">
      <span class="box-text">Weight Lifting</span>
      <span class="box-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus maiores cumque quod atque, iusto maxime natus. Obcaecati nisi adipisci doloribus!</span>
    </div>
  </div>
  </div

Ответ №1:

Вы перемещаете поле в фоновый режим с отрицательным z-index значением, поэтому наведение мыши никогда не регистрируется (но его все равно можно запустить с помощью инструментов разработки Chrome).

 .box {
  height: 20rem;
  width: 34rem;
  box-shadow: 0px 4px 18px black;
  z-index: 0;
  position: relative;
  margin: 5rem 0;
}

.box::before {
  content: '';
  width: 34rem;
  height: 100%;
  background-color: black;
  position: absolute;
  z-index: -1;
  opacity: 27%;
  transition: all .3s ease-in-out;
}

.box:hover::before {
  opacity: 80%;
} 
 <div class="boxes">
  <h1 class="service-title" style="color: black;">Services</h1>
  <div class="box-content">
    <div class="box box1">
      <span class="box-text">Weight Lifting</span>
      <span class="box-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus maiores cumque quod atque, iusto maxime natus. Obcaecati nisi adipisci doloribus!</span>
    </div>
  </div>
  </div
Метки: