Tags: hover

In Praise of the Unambiguous Click Menu | CSS-Tricks

What’s important is that you test it with real users… and stop using hover menus.

Strong agree!

Striking a Balance Between Native and Custom Select Elements | CSS-Tricks

I think this a solution worthy of Solomon. In this case, the Gordian knot is the select element and its inevitable recreation in order to style it.

What if we instead deliver a native select by default and replace it with a more aesthetically pleasing one if possible? That’s where the “hybrid” select idea comes into action. It’s “hybrid” because it consists of two selects, showing the appropriate one at the right moment:

• A native select, visible and accessible by default
• A custom select, hidden until it’s safe to be interacted with a mouse

The implementation uses a genius combination of a hover media query and an adjacent sibling selector in CSS. It has been tested on a number of device/platform/browser combinations but more tests are welcome!

What I love about this solution is that it satisfies the stakeholders insisting on a custom component but doesn’t abandon all the built-in accessibility that you get from native form controls.

Fading out siblings on hover in CSS | Trys Mudford

Well, the clever CSS techniques just keep on comin’ from Trys—I’m learning so much from him!

The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks

This article by Cassie is so, so good!

First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!

Best of all, I get to work with the super-smart developer who did all this.

Silly hover effects and the future of web typography – Pixelambacht

These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.

End hover abuse now : Cennydd Bowles on user experience

An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.

Non Hover | Trent Walton

A timely reminder: don't hide information behind mouseover events.

Amazon: A Quick Tour of Our New Remodel

Amazon is AB testing their next design iteration. Bye, bye tabs (yay!), hello fly-out menus (boo!).