html - 在 CSS 中为页面上的每个元素添加叠加颜色

Question

我想为任意 html 页面上的每个元素添加覆盖颜色，并让它不断着色。这样当我将鼠标悬停在元素上时，我可以移除叠加层，从而突出显示悬停的元素，如下所示:

我希望我能够做这样的事情:

* {
  position: relative;
  z-index: 1;
}

*:after {
  content: ''; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.1);
}

但是您最终得到的是嵌套元素，上面有多个叠加层，所以它看起来不太干净。最终看起来更像这样:

我能想到的唯一其他选择是某种覆盖整个页面的覆盖元素，然后当您将鼠标悬停在某个元素上时，它会在其上添加某种反覆盖元素。

有什么想法吗？

Answer 1

您可以添加一个具有大 z-index 的叠加层，一旦您将鼠标悬停在一个元素上，您就可以增加它的 z-index 以将其移动到上方:

body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  pointer-events: none;/* This will do all the magic !*/
}

body *:hover {
  position: relative;
  z-index: 1000;
  background: #fff;
}

<h1>tile</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id rhoncus arcu. Phasellus venenatis ex nulla, nec feugiat nibh sodales at. Pellentesque vehicula eu arcu at varius</p>

<div>
  <h2>another title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id rhoncus arcu. Phasellus venenatis ex nulla, nec feugiat nibh sodales at. Pellentesque vehicula eu arcu at varius</p>
</div>