CSS Модули и hover css не работают должным образом

Question

Я создал реагирующее веб-приложение с пользовательской сборкой - все построено с нуля: веб-пакет, веб-сервер-сервер, машинопись, загрузчики изображений, css, scss, css-модули.У меня проблема с псевдоэлементами CSS.Hover не работает должным образом.

 .image {
  height: auto;
  width: auto;
  z-index: 10;
}

.image:hover{
  visibility: hidden !important;
}

ссылка на предварительный просмотр в реальном времени https://5c1a4a2b9db5a37380b6ebf0 - Practical-archimedes-b4d9da.netlify.com/

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

Answer 1

Это работает, как и ожидалось, это не связано с css-modules или react, это то, как CSS работает.

Когда элемент hidden, он "теряет" состояние зависания, поэтому он переключается обратно на visible (начальное значение для visibility), затем снова ловит событие наведения и так далее.Вот почему это мерцает.

Что вы можете сделать, это сделать opacity:0:

.image:hover{
  opacity:0;
}

Пример с отличиями:

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.box {
  background-color: #333;
  color: #fff;
  flex: 1;
  margin: 15px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opacity:hover {
  opacity: 0;
}

.hidden:hover {
  visibility: hidden;
}

<div class="wrapper">
  <div class=" box opacity ">Opacity</div>
  <div class="box hidden ">Visibility</div>
</div>

Answer 2

Вы можете попробовать этот код для решения проблемы

.image {
  height: auto;
  width: auto;
  z-index: 10;
}

   &:hover{
     visibility: hidden !important;
   }