Solving Sticky Hover States with @media (hover: hover)

Category Image 052

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium¹.

If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.

button:hover {
  border: 3px solid green; /* might stick! */
}

The solution, or trick, is a new(ish) "CSS4" media query that allows you only to apply styles on devices with hover capability.

@media (hover: hover) {
  button:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}

Your typical touch screen mobile device will fail that media query, the style won't apply, and you'll avoid the sticky problem.

Support is solid, so not much worry there.

  1. It almost feels like we have to apologize to linking to things on Medium lately. I have no idea what you're going to experience when you get there. Will you just be able to read it? Will it be a teaser where you have to log in to read more? Will it be behind a paywall? I have no idea. In this case, hopefully, this link post has enough info in it that isn't not blocking you from learning anything.


Direct Link to ArticlePermalink

The post Solving Sticky Hover States with @media (hover: hover) appeared first on CSS-Tricks.

Belvo API Brings Open Banking to Latin America

Featured Imgs 23

Belvo, an open banking API provider for the Latin American market, is now live. After a successful beta program that began last fall, Belvo is fully up and running with a number of developer resources available. Its core offering, the Belvo API, aims to empower open banking in Latin America.

Include With Where Clause

Category Image 011

Ever thought about writing the following query in Entity Framework?

SQL


Editor Activity Indicator

Featured Imgs 23

You might notice a smidge of extra visual activity happening down in the Pen Editor footer lately. We're trying to show you a bit more information about what the Pen Editor is actually doing.

Here's an example (5 second video) where I'm editing some HTML to include an <em> tag or not, and the editor is doing stuff to make that happen for me:

The idea is to show you (and us!) what is happening in the Pen Editor as we do it. Like sometimes code needs to get processed. Sometimes the preview needs to get rebuilt. Sometimes your code is off being linted or formatted. There is a bunch of stuff that might be going on in the editor, and we wanted a dedicated place to be clear about that rather than having it be a silent mystery.

The post Editor Activity Indicator appeared first on CodePen Blog.