Блог

Главная - Вопросы по программированию - Мерцание при изменении видимости при наведении

Мерцание при изменении видимости при наведении

#html #css

#HTML #css

Вопрос:

У меня возникли проблемы с моим HTML и CSS.

У меня есть два контейнера, которые находятся непосредственно друг над другом.

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

Однако я обнаружил, что, хотя это работает, это часто просто приводит к быстрому мерцанию между двумя состояниями.

Я понятия не имею, почему это происходит, и, похоже, не могу понять это. Я попытался изменить z-индекс и позицию, как предлагалось в других подобных сообщениях, и ничего не смог заставить работать.

Код в codepen:https://codepen.io/michaelnicol/pen/jOqYbGo

HTML:

 <html>
  <head>
  </head>
  <body>
    <main>
      <div class="image_container">
        <div class="text_div">
          <h1>Mona Lisa</h1>
          <p>Lorem lipsum dolor sit amat</p>
        </div>
      </div>
    </main>
  </body>
</html>

CSS:

 
/* Formatting Code */

main {
  width: 90%;
  height: 90%;
  min-height: 900px;
  border: 1px solid black;
  background-color: #efefef;
  margin: 5%;
  border-radius: 20px;
  box-shadow: 2px 2px 5px black;
  display: flex;
  justify-content: center;
  align-items: center;
}


body {
  display: flex;
  justify-content: center;
  background-color: rgb(147, 165, 207);
}

.text_div > h1, .text_div > p {
  color: white;
  text-shadow: 2px 2px 5px black;
}

/* image hover code */

.image_container {
  height: 300px;
  width: 400px;
  border: 1px solid black;
  background-color: rgb(156, 48, 48);
  background-image: url("https://i.pinimg.com/474x/c6/90/48/c69048072a6d77dfb0a317db98ef145d.jpg")
}

.text_div {
  visibility: visible;
  opacity: 0.85;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: 0.5s ease-in-out;
}

.text_div:hover {
  visibility: hidden;
}

Ответ №1:

Попробуйте заменить это:

 .text_div:hover {
  visibility: hidden;
}

С помощью этого:

 .image_container:hover .text_div {
    opacity: 0;
    pointer-events: none;
}