Эмуляция инспектора выделить при наведении - PullRequest
Новая
       68

Эмуляция инспектора выделить при наведении

2 голосов
/ 08 апреля 2020

Я пытаюсь эмулировать эффект Chrome / Firefox Подсветка инспектора , используя CSS. Я могу добиться этого относительно неплохо, но ...

Если дочерний элемент находится, его родитель также выделяется. Вы знаете, как я могу это исправить? В приведенном ниже примере наведите курсор на заголовок, и вы увидите, что почти все выделено. Только заголовок должен быть красным. 

*: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>

1 Ответ

0 голосов
/ 08 апреля 2020

Одним из приближений является рассмотрение другого псевдоэлемента, чтобы скрыть родительский элемент: 

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>

Вы можете решить проблему z-index, задав для нее значение auto, но у вас могут быть другие побочные эффекты: 

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>
...