Блог

Главная - Вопросы по программированию - При наведении курсора мыши на изображение и использовании свойства z-index изображение мерцает?

При наведении курсора мыши на изображение и использовании свойства z-index изображение мерцает?

#html #css #hover #z-index

#HTML #css #наведите #z-index

Вопрос:

Я не очень-то силен в html, но мне удалось кое-что сделать с кодированием, и пока это единственная проблема, которую я не могу ни понять, ни исправить.

У меня есть одно большое изображение, но под изображением находятся текстовые поля, ссылки и другие изображения. Я могу переместить изображение туда, где, если я наведу на него курсор мыши, я смогу отлично видеть содержимое под ним, но я не могу прокручивать текстовые поля и не могу нажимать на ссылки.

Я попытался установить z-index равным -9, но что работает … если я не двигаю мышью. (Бессмысленно.) Если я перемещаю мышь, изображение мерцает при любом движении. Какие-либо исправления? Вот в чем проблема.Прошу прощения за беспорядочный код.

  #aesth {
 position:fixed;
 top:150px;
 left:90px;
 width:432px;
 height:600px;
 background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
 z-index:9;
 }

 #aesth:hover {

z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

Ответ №1:

Проблема с наведением возникла из-за z-index=-9 приведенного в

 #aesth:hover {
  z-index:-9;
  opacity: 0;
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

Просто удалите z-index внутри #aesth:hover , и все будет нормально

Комментарии:

1. Я пробовал это, и да, я могу видеть объекты под ним, но я не могу щелкнуть по ним, что является основной проблемой.

Ответ №2:

Проблема в том, что при наведении курсора на изображение оно тускнеет и остается позади. Когда оно закрывается, оно возвращается в исходное состояние, потому что на этот раз наведен курсор не на него, а на другое содержимое. Пытаюсь нацелиться на родительский объект при наведении курсора мыши, а затем применить эффект к изображению. Таким образом, эффект наведения сохраняется, потому что цель не удаляется от указателя мыши.

 parent:hover > #aesth{

z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}