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.

Try https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image — Alon Eitan, Jan 15 '19 at 12:00
@AlonEitan — A server side image map is significantly different to a submit button containing an image. — Quentin, Jan 15 '19 at 12:03
In my Firefox (Windows) the opacity change works, the cursor change doesn't. — connexo, Jan 15 '19 at 12:03
@TemaniAfif The cursor change also doesn't work in Firefox when you remove the button. — connexo, Jan 15 '19 at 12:06
@connexo yes and I am not surprised, button are very special and never behave the same in all the browsers. My guess is that their content is handled by the browser disabling a lot of common CSS — Temani Afif, Jan 15 '19 at 12:08
@connexo — It's even more different to a non-submit button. — Quentin, Jan 15 '19 at 12:08
@Quentin Not sure I understand, but perhaps I misread the question. I tried it with `input type="image"` and it works on FF http://jsfiddle.net/dnxLvs57/ — Alon Eitan, Jan 15 '19 at 12:09
@TemaniAfif That was not my point. I'm saying the cursor change does not work even if there is no button around the `img` tag. — connexo, Jan 15 '19 at 12:11
@AlonEitan — HTML is a semantic markup language. You can't swap out elements without changing the meaning. — Quentin, Jan 15 '19 at 12:11

Alain.D · Accepted Answer · 2019-01-15T12:31:04.960

3

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.

edited Jan 15 '19 at 12:31

answered Jan 15 '19 at 12:14

Alain.D

308
1
2
11

1

While a working solution is probably not unwelcomed, this does not answer the question. – connexo Jan 15 '19 at 12:17
1

`Firefox does not ignore the :hover event. But the button element steal the priority of all mouse events` --> we all can see this but did you have any official ressource? – Temani Afif Jan 15 '19 at 12:28
1

I am not sure about what do you mean for an official source. Here is a link to BUGZILLA talking about this : https://bugzilla.mozilla.org/show_bug.cgi?id=843003 – Alain.D Jan 15 '19 at 12:38
This actually explains a lot, thanks a lot. But then is there no possibility for a :hover to be attached only to an image instead of targeting the whole button? also thanks for the link to bugzilla - clarifies great bit too. – Tyiliyra Jan 15 '19 at 12:51
1

If you're still talking about an located inside a button element, from what I know you'll not be able to target it with a :hover (or :focus, :active,...) because the button element doesn't allow it. I think you'll have to create an alternative button using a
instead of a
– Alain.D Jan 15 '19 at 13:00
Right, it (either div or input element) would work in my personal case but doing something like this in a bigger project would make the markup a huge mess... Using a conditional and detecting the firefox browser to apply different rulesets is mind boggling as well. – Tyiliyra Jan 15 '19 at 13:16
1

I'm glad I could help you with your question. Don't forget to mark my answer as the one which helped you =) In a bigger project (depending of your needs) I'd probably replace all – Alain.D Jan 15 '19 at 13:43

Why firefox ignores css :hover selector?

1 Answers1