Почему firefox игнорирует селектор css: hover?

Question

Я настраиваю простую анимацию для моего значка кнопки.Предполагается, что изображение в кнопке изменится с 0,25 непрозрачности по умолчанию до 1 после наведения на нее.Хорошо работает с Chrome / Edge, но Firefox, кажется, игнорирует его (: hover).

Первое предположение состояло в том, что Firefox почему-то не поддерживает прозрачность.Это так, поскольку значение по умолчанию для изображения, установленного на непрозрачность 0,25, соблюдается.Никаких префиксов не нужно, что бы ни случилось.Также курсор не меняется вообще.Тогда подумал, может быть, это: зависание, но это должно было быть на 100% поддержано с каменного века.Затем меня поразило, что это могло произойти из-за используемого мной макета CSS 2-го уровня, который на самом деле еще не полностью реализован в браузерах.Я включил несколько флагов макета в Firefox, но это тоже не принесло решения.В любом случае, создание этого примера показывает, что оно не имеет ничего общего с сеткой CSS.Я пытался использовать JavaScript, но не помогло.Я думаю, это плохая практика в любом случае.Моей последней попыткой была попытка повысить специфичность - здесь тоже не повезло, пойди разберись.

button {
  padding: 20px 40px;
}

.images {
  opacity: 0.25;
}

.images:hover {
  opacity: 1;
  cursor: pointer;
}

<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>

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

Answer 1

попробуйте это:

button {
  padding: 20px 40px;
}

button .images {
  opacity: 0.25;
}

button:hover .images{
  opacity: 1;
  
}
button{
  cursor: pointer;
}

<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>

Я изменил способ вызова HTML-элементов в вашем CSS. Для меня это работает на Firefox 64.0.2 (64 бита).

EDIT: Firefox не игнорирует событие :hover. Но элемент button ворует приоритет всех событий мыши. Вот почему внутри элемента, так как ваш <img> не может быть завис. Это просто способ, которым Firefox интерпретирует этот код.

Вы также можете посмотреть этот пост .