How to create highlighted Link on Hover

How to Highlight a Link on Hover by Adjusting Opacity or Blur.

Learn how to create a navigation menu where hovering over a link highlights it by decreasing the opacity or adding blur to the other links. This visually isolates the hovered link, enhancing its prominence. TailwindCSS makes this effect simple and customizable.

Opacity Highlight Effect

You can reduce the opacity of sibling links when hovering over one link using the hover state and CSS variables. This gives the active link more visual focus.

<nav class="flex hover:[--link-opacity:0.4]">
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) text-sm text-gray-800 transition-opacity duration-300 hover:[--link-opacity:1] dark:text-gray-200">Home</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) text-sm text-gray-800 transition-opacity duration-300 hover:[--link-opacity:1] dark:text-gray-200">About</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) text-sm text-gray-800 transition-opacity duration-300 hover:[--link-opacity:1] dark:text-gray-200">Services</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) text-sm text-gray-800 transition-opacity duration-300 hover:[--link-opacity:1] dark:text-gray-200">Contact</a>
</nav>

// With * to apply the same styles to all children
<nav class="flex hover:[--link-opacity:0.4] *:px-3.5 *:py-1 *:opacity-(--link-opacity) *:text-sm *:text-gray-800 *:transition-opacity *:duration-300 *:hover:[--link-opacity:1] dark:*:text-gray-200">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

In this example:

The hover:[--link-opacity:0.4] is applied to the nav element, setting a base opacity for links when hovering.
Each link uses opacity-(--link-opacity) to dynamically adjust opacity.
The hover:[--link-opacity:1] ensures the hovered link remains fully visible.

Blur Highlight Effect

An alternative to opacity is using the blur-sm utility. This blurs sibling links while keeping the hovered link sharp and in focus.

<nav class="flex hover:[--link-blur:2px]">
    <a href="#" class="px-3.5 py-1 blur-(--link-blur) text-sm text-gray-800 transition-[filter] duration-300 hover:[--link-blur:0] dark:text-gray-200">Home</a>
    <a href="#" class="px-3.5 py-1 blur-(--link-blur) text-sm text-gray-800 transition-[filter] duration-300 hover:[--link-blur:0] dark:text-gray-200">About</a>
    <a href="#" class="px-3.5 py-1 blur-(--link-blur) text-sm text-gray-800 transition-[filter] duration-300 hover:[--link-blur:0] dark:text-gray-200">Services</a>
    <a href="#" class="px-3.5 py-1 blur-(--link-blur) text-sm text-gray-800 transition-[filter] duration-300 hover:[--link-blur:0] dark:text-gray-200">Contact</a>
</nav>

// With * to apply the same styles to all children
<nav class="flex hover:[--link-blur:2px] *:px-3.5 *:py-1 *:blur-(--link-blur) *:text-sm *:text-gray-800 *:transition-[filter] *:duration-300 *:hover:[--link-blur:0] dark:*:text-gray-200">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

Here:

hover:[--link-blur:2px] applies a blur effect to all links.
The blur-(--link-blur) utility dynamically adjusts the blur amount.
hover:[--link-blur:0] ensures the hovered link stays clear.

Combine Effects

You can also combine opacity and blur to create a more layered highlighting effect.

<nav class="flex hover:[--link-opacity:0.5] hover:[--link-blur:2px]">
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) blur-(--link-blur) text-sm text-gray-800 transition-[opacity,filter] duration-300 hover:[--link-opacity:1] hover:[--link-blur:0] dark:text-gray-200">Home</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) blur-(--link-blur) text-sm text-gray-800 transition-[opacity,filter] duration-300 hover:[--link-opacity:1] hover:[--link-blur:0] dark:text-gray-200">About</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) blur-(--link-blur) text-sm text-gray-800 transition-[opacity,filter] duration-300 hover:[--link-opacity:1] hover:[--link-blur:0] dark:text-gray-200">Services</a>
    <a href="#" class="px-3.5 py-1 opacity-(--link-opacity) blur-(--link-blur) text-sm text-gray-800 transition-[opacity,filter] duration-300 hover:[--link-opacity:1] hover:[--link-blur:0] dark:text-gray-200">Contact</a>
</nav>

// With * to apply the same styles to all children
<nav class="flex hover:[--link-opacity:0.5] hover:[--link-blur:2px] *:px-3.5 *:py-1 *:opacity-(--link-opacity) *:blur-(--link-blur) *:text-sm *:text-gray-800 *:transition-[opacity,filter] *:duration-300 *:hover:[--link-opacity:1] *:hover:[--link-blur:0] dark:*:text-gray-200">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

On this page