如何用CSS实现页面元素全局覆盖色，hover时移除覆盖高亮元素？

I’ve run into this exact nested overlay issue before—your original CSS approach adds a pseudo-element mask to every single element, so child elements end up stacking their masks on top of parents, creating that messy, uneven darkening effect. Let’s fix this with a global overlay approach instead, which keeps the overlay consistent across the page and only highlights the element your mouse is over.

Method 1: CSS + Light JavaScript (Recommended) #

This uses a single full-screen overlay, then uses JS to dynamically boost the z-index of the element under your mouse so it pops above the overlay. It’s reliable and works across all modern browsers.

Step 1: Add the Global Overlay #

First, insert a fixed-position div at the end of your <body> to cover the entire viewport:

<div class="full-page-overlay"></div>

Step 2: Style the Overlay and Highlight Class #

The overlay stays fixed, uses a semi-transparent background, and has pointer-events: none so it doesn’t block mouse interactions with underlying elements. The highlight class boosts an element’s z-index above the overlay:

.full-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  pointer-events: none; /* Let clicks/mouse events pass through */
}

.highlighted {
  position: relative !important; /* Ensure z-index works even if element is static */
  z-index: 10000 !important; /* Push above the overlay */
}

Step 3: Track Mouse Hover with JS #

We listen for mouse movement to update which element gets the highlight class, and clean up when the mouse leaves the page:

const overlay = document.querySelector('.full-page-overlay');
let currentHighlight = null;

document.addEventListener('mousemove', (e) => {
  const targetElement = e.target;
  
  // Skip if we're already highlighting this element
  if (targetElement === currentHighlight) return;
  
  // Remove highlight from the previous element
  if (currentHighlight) {
    currentHighlight.classList.remove('highlighted');
  }
  
  // Add highlight to the new target
  targetElement.classList.add('highlighted');
  currentHighlight = targetElement;
});

// Clear highlight when mouse leaves the page
document.addEventListener('mouseleave', () => {
  if (currentHighlight) {
    currentHighlight.classList.remove('highlighted');
    currentHighlight = null;
  }
});

Method 2: Pure CSS (Limited Use Cases) #

If you want to avoid JS, you can use the :has() selector (supported in modern browsers), but this has limitations with nested elements:

/* Full-page overlay on body */
body:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  pointer-events: none;
}

/* Base z-index for all elements */
* {
  position: relative;
  z-index: 1;
}

/* Boost z-index on hover */
*:hover {
  z-index: 10000;
}

Note: This works for simple layouts, but nested elements will both trigger the hover state (parent and child), leading to multiple elements popping above the overlay at once. It’s not as clean as the JS approach for complex pages.

Why This Fixes Your Original Problem #

• No more stacked masks: There’s only one overlay covering the entire page, so the tint is consistent everywhere.
• Only the exact element under your mouse gets highlighted, with no messy overlapping effects from nested elements.

内容的提问来源于stack exchange，提问作者goddamnyouryan