Tag Archives: hover

Getting the Mouse Position using CSS

For his post How to Map Mouse Position in CSS on CSS-Tricks, Amit Sheen created this lovely demo:

The demo does use CSS Custom Properties for the X/Y position of the mouse, but they’re not injected using JavaScript. Instead, Amit uses the same technique as used in CSS-Only Direction Aware Hover: capture the hover on extra injected elements (here: 100 of them 😅).

By means of a General Sibling Combinator he then passes the data of each cell — which knows its location in the grid — to the content.

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

4 Ways to Animate the Color of a Text Link on Hover

Good writeup by Katherine Kato of several techniques on how to change the color of a link on hover, animated

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.

There are four different techniques we can use to do this. Let’s look at those while being mindful of important things, like accessibility, performance, and browser support in mind.

When looking only at the code, I’m more a fan of the background-clip: text technique as it does not require you to duplicate the text into a data-* attribute. It does however has some nasty side-effects such as no longer displaying text-decorations and shadows.

If we only had something like content: text-content; in CSS, then we could remove the data-* content duplication requirement.

4 Ways to Animate the Color of a Text Link on Hover →

💄 Apart from animating only color, I also like animating the separate text-decoration-* properties or background-size on hover.

Fading out siblings on hover in CSS

Nice one by Trys Mudford:

Hover states traditionally run on the element being hovered on (makes sense, right?). But we can also listen for the hover event on the parent element.

That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading it back in.

And with some pointer-events manipulation, it’s prevented that all items fade out when hovering the gaps between the items.

.parent:hover > * {
  opacity: 0.5;
}

.parent:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;
}

.parent {
  pointer-events: none;
}

.parent > * {
  pointer-events: auto;
}

Fading out siblings on hover in CSS →

CSS-Only Direction Aware Hover

In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content.

Internally it looks like this:

Note that the hitareas are made triangular using CSS Clipping, and not using the for this typically used CSS border-fiddling.

Here’s a Pen of the final markup for you to play with:

See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee (@gabriellewee) on CodePen.

Neat! In the process of getting to the end result, a pure CSS version of the Tilt Hover Effect is also demonstrated 🙂

How to Create Direction-Aware CSS-Only Hover Effects →

Sidenote/Related: The General Sibling Selector – just like any other Combinator such as the Adjacent Sibling Selector (+) for that matter – is a CSS Selector that’s very powerful and should be used more often. Here’s why: