在悬停时模拟检查器突出显示

Question

我正在尝试仅使用 CSS 来模拟 Chrome/Firefox Inspector Highlighting 效果。我可以相对较好地实现它，但是......

如果一个子元素被悬停，它的父元素也会被高亮。你知道我该如何解决这个问题吗？在下面的示例中，将鼠标悬停在标题上，您将看到几乎所有内容都突出显示。只有标题应该是红色的。

*:hover {
  position: relative;
}

*:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,0,0,0.25);
}

<main style="height: 600px; position: relative;">
  <header style="height: 100px;">Title</header>
  
  <footer style="height: 100px; position: absolute; bottom: 0; width: 50%;">Footer</footer>
</main>

Answer 1

一种近似方法是考虑另一个伪元素来隐藏父元素之一：

html *:hover {
  position: relative;
}

html *:hover::after {
  content: "";
  position: absolute;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.25);
  opacity: .7;
}
html *:hover::before {
  content: "";
  position: fixed;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* increase the order of each child to make it cover the parent*/
html *:hover *::before,
html *:hover *::after{
  z-index:-98;
}
html *:hover * *::before,
html *:hover * *::after{
  z-index:-97;
}
html *:hover * * *::before,
html *:hover * * *::after{
  z-index:-96;
}
html *:hover * * * *::before,
html *:hover * * * *::after{
  z-index:-95;
}
/* and so on ...*/
html * {
  outline: 1px solid red;
  padding:15px;
  box-sizing:border-box;
}

<main style="height: 600px; position: relative;">
  <header style="height: 100px;">Title</header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a sollicitudin ligula. Phasellus ipsum tellus, interdum in nisl volutpat, vulputate aliquet massa. Ut non vulputate nisi, elementum faucibus mauris. Nam elementum non nisl sit amet mattis. Pellentesque consequat commodo rhoncus. Qu</p>
  <footer style="height: 100px; position: absolute; bottom: 0; width: 50%;">Footer</footer>
</main>

这不是一个可靠的解决方案，因为在文档中使用 z-index 或其他属性可能会破坏这个技巧：

html *:hover {
  position: relative;
}

html *:hover::after {
  content: "";
  position: absolute;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.25);
  opacity: .7;
}
html *:hover::before {
  content: "";
  position: fixed;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* increase the order of each child to make it cover the parent*/
html *:hover *::before,
html *:hover *::after{
  z-index:-98;
}
html *:hover * *::before,
html *:hover * *::after{
  z-index:-97;
}
html *:hover * * *::before,
html *:hover * * *::after{
  z-index:-96;
}
html *:hover * * * *::before,
html *:hover * * * *::after{
  z-index:-95;
}
/* and so on ...*/
html * {
  outline: 1px solid red;
  padding:15px;
  box-sizing:border-box;
}

<main style="height: 600px; position: relative;z-index:0;"> <!-- added a z-index here -->
  <header style="height: 100px;">Title</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a sollicitudin ligula. Phasellus ipsum tellus, interdum in nisl volutpat, vulputate aliquet massa. Ut non vulputate nisi, elementum faucibus mauris. Nam elementum non nisl sit amet mattis. Pellentesque consequat commodo rhoncus. Qu</p>
  <footer style="height: 100px; position: absolute; bottom: 0; width: 50%;">Footer</footer>
</main>

您可以通过强制他们使用auto 来解决z-index 问题，但您可能会有其他副作用：

html *:hover {
  position: relative;
  z-index:auto!important;
}

html *:hover::after {
  content: "";
  position: absolute;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.25);
  opacity: .7;
}
html *:hover::before {
  content: "";
  position: fixed;
  z-index:-99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* increase the order of each child to make it cover the parent*/
html *:hover *::before,
html *:hover *::after{
  z-index:-98;
}
html *:hover * *::before,
html *:hover * *::after{
  z-index:-97;
}
html *:hover * * *::before,
html *:hover * * *::after{
  z-index:-96;
}
html *:hover * * * *::before,
html *:hover * * * *::after{
  z-index:-95;
}
/* and so on ...*/
html * {
  outline: 1px solid red;
  padding:5px;
}
html * {
  outline: 1px solid red;
  padding:15px;
  box-sizing:border-box;
}

<main style="height: 600px; position: relative;z-index:0;"> <!-- added a z-index here -->
  <header style="height: 100px;">Title</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a sollicitudin ligula. Phasellus ipsum tellus, interdum in nisl volutpat, vulputate aliquet massa. Ut non vulputate nisi, elementum faucibus mauris. Nam elementum non nisl sit amet mattis. Pellentesque consequat commodo rhoncus. Qu</p>
  <footer style="height: 100px; position: absolute; bottom: 0; width: 50%;">Footer</footer>
</main>