Opera missing hover area

20080923586

The other day I ran into an issue with the latest version of Opera (9.52) not applying the hover state of a text link to the entire link area. For example, with text that changed color on hover all but the ascender would change. Or all but the last 2 and a half letters would change despite the entire link being active.

The links were in the dropdowns of a main navigation based on the suckerfish technique. Simple enough and a tried and tested solution. Something about this particular cased was causing it to break. Perhaps the work arounds for sliding doors in a centered alignment. While I’m not certain what combination of rules caused the problem, removing the absolute positioning fixed it. Unfortunately that wouldn’t cut it given the positioning was required to get the dropdowns to show and hide. Neither forcing additional padding around the element nor various display properties did helped either.

Adding an outline on the links and parents as a testing measure to see if anything was overlapping oddly had a surprise result: the hover state worked as normal. As it turns out, just defining the outline to any value other than none triggered a functioning hover state. Setting outline: 0 solid transparent; on the links despite not having any visual outline effect forced the rendering engine to apply the hover state to the entire link area.

And so the dropdowns work though slightly less accessible due to missing outlines. The solution reminds me of using a hidden border or one pixel of padding to prevent margin collapsing. Now just to figure out exactly what triggered the bug in the first place.


Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.


Search WayTooCrowded
The Header Should Always Point Home