: псевдо-состояние hover не запускается в IE - PullRequest
Новая
       12

: псевдо-состояние hover не запускается в IE

0 голосов
/ 15 мая 2019

У меня есть эта разметка 

<button class="toggle" aria-label="Toggle">
   <div class="globe-img"></div>
</button>

и SASS: 

.globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
   &:hover {
     background-image: url('../images/globe-hv.png');
   }
 }

Она работает во всех последних браузерах, кроме IE.Псевдо-состояние при наведении курсора в IE не срабатывает.Я нашел несколько вопросов на Stackoverflow по этому поводу, но все они старше и не предоставили решения (пока), поэтому я подумал, что, возможно, стоит задать еще раз.

Обратите внимание, что в обоих состояниях определено фоновое изображение.Я добавил z-index и попробовал тег IMG вместо DIV.Я попробовал display: block и добавил цвета фона.Я ценю любые новые указатели.Если ничего другого, я просто буду использовать Javascript для добавления обычного класса CSS при наведении курсора.

1 Ответ

1 голос
/ 16 мая 2019

Я могу ошибаться, поскольку у меня нет IE для тестирования ...

Я предполагаю, что проблема заключается в кнопке, как обертке.Я предполагаю, что состояние наведения кнопки перекрывает состояние наведения div.Это работает, если вы удалите <button>?

Поочередно ли это работает, если вы наведите курсор мыши на кнопку? 

 .globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
 }
 button:hover .globe-img {
   background-image: url('../images/globe-hv.png');
 }
...