Why firefox ignores css :hover selector?

Question

I am setting up a simple animation to my button icon. The image in the button is supposed to go from 0.25 opacity default to 1 after hovering over it. Works well with chrome/edge, but firefox seems to ignore it (:hover).

The first guess was that firefox somehow does not support opacity. It does, as the default value of image set to 0.25 opacity is respected. There is no need for any prefixes what so ever. Also, the cursor does not change at all. Then thought maybe it is :hover, but that should have been 100% supported since the stone age. Then it struck me that this could have been due to CSS grid level 2 layout design I am using, which actually is not yet fully implemented in browsers. I had enabled some layout flags in firefox but that has not brought the solution either. Anyhow making this sample shows it has nothing to do with the CSS grid layout. I tried using javascript but did not help. I guess it is a bad practice anyway. My last resort attempt was to try and increase specificity - no luck here either, go figure.

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>

I expect the hover over increases the opacity of an image, as well as changes the cursor to pointer. I would be grateful for any feedback.

Answer 1

try this :

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>

I changed the way you call HTML elements in your CSS. For me it works on firefox 64.0.2 (64 bits).

EDIT: Firefox does not ignore the :hover event. But the button element steal the priority of all mouse events. That's why inside element, as your <img> can't be hovered. This is simply the way Firefox interprets this code.

You can also have a look on this post.