Why does image transparency on the Firefox Button not work?

Question

I have this code that is nothing more than an image with opacity inside a button. Chrome works normally, but Firefox is bugged, as you can see.

Follow the code for the image above:

button {
    padding: 10px;
}

.images {
    opacity: 0.25;
}

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

<button type="button">
    <img class="images" src="https://placecage.com/100/100">
</button>
<button type="button">
    <img class="images" src="https://placecage.com/100/100">
</button>

Answer 1

In addition to Firefox, it also happens on IE11. Because it is a button, the mouse events (mouseover, mouseleave, etc.) are all linked to the button itself, and not to its child elements. With that, a :hover applied directly to a child element of the button will not answer. Whether it is a bug or not (there are signs for this as quoted by Netinho’s reply) I can not say, but it is the way that these browsers treat this case.

But I find it hard to be a bug. See that the link in Bugzilla pointed out in Netinho’s response is 6 years ago. Since then Firefox has suffered many updates (as well as IE). If it was really a bug, I think it would have been fixed by now.

But one way around it is by putting the :hover on the button pointing to the child element:

button {
    padding: 10px;
    cursor: pointer;
}

.images {
    opacity: 0.25;
}

button:hover .images{
    opacity: 1;
}

<button type="button">
    <img class="images" src="https://placecage.com/100/100">
</button>

Note that up to the property cursor: pointer; had to be applied to button and not to the image. Otherwise, it would not answer either.

Answer 2

I recently had a similar problem and I managed to solve by applying the event hover the parent element, that is to say button. Apparently in Firefox, the child elements of the tag button are not valid candidates for hover. There’s a report on Bugzilla concerning this problem: Children of button does not Respond to :Hover

Example :

button {
  padding: 10px;
}

button {
  opacity: 0.25;
  cursor: pointer;
}

button:hover {
  opacity: 1;
}

<button type="button">
    <img class="images" src="https://placecage.com/100/100">
</button>
<button type="button">
    <img class="images" src="https://placecage.com/100/100">
</button>