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>

Answer 2

我想您可以尝试以下解决方案：

使用“覆盖父级”类创建父级。
您可以重叠的元素应位于新父元素的下一级。
在CSS中：

.overlay-parent > * { // Affect every direct child element of this parent
  position: relative;
  z-index: 1;
}

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

Answer 3

* {
  margin: 0;
  padding: 0;
}

section, header {
  position: relative;
}

.overlay::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  transition: 0.7s ease;
}

section:hover .overlay::before, header:hover .overlay::before{
  background: rgba(0,0,0,0);
  transition: 0.7s ease;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <header>
    <div class="overlay"></div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>
  <section>
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="alert alert-primary" role="alert">
            This is a primary alert—check it out!
          </div>
          <div class="alert alert-secondary" role="alert">
            This is a secondary alert—check it out!
          </div>
          <div class="alert alert-success" role="alert">
            This is a success alert—check it out!
          </div>
          <div class="alert alert-danger" role="alert">
            This is a danger alert—check it out!
          </div>
          <div class="alert alert-warning" role="alert">
            This is a warning alert—check it out!
          </div>
          <div class="alert alert-info" role="alert">
            This is a info alert—check it out!
          </div>
          <div class="alert alert-light" role="alert">
            This is a light alert—check it out!
          </div>
          <div class="alert alert-dark" role="alert">
            This is a dark alert—check it out!
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

我创建了一个布局只是为了向您展示效果。在您要使用效果的部分中添加.overlay的样式。希望对您有帮助

Answer 4

我认为单独使用CSS可能无法处理嵌套元素。

以下是我如何解决此问题的示例。您可以根据需要将其转换为Vanilla JS。

其中包含一些测试用例，但这是一个非常简单的示例。您的结果可能会有所不同。

$('*').on('mouseover', function(e) {
    e.stopPropagation();  
    
    if ($(this).is('body')) return; /* prevent flicker */
    
    $('*').removeClass('hovered');
    $(this).addClass('hovered');
})

$('*').on('mouseout', function() {
    $(this).removeClass('hovered');
})

body {
  background: orange;
}

body::after {
  content: "";
  background: rgba(0, 0, 0, .25);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

body:hover:after {
  display: none;
}

.hovered {
  outline: 1px dashed cyan;
  box-shadow: 0 0 0 2000vh rgba(0, 0, 0, .25); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <h1>
  Lorem ipsum
  </h1>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac posuere dolor. Vivamus urna neque, venenatis vitae mauris non, vehicula tristique magna. Ut sed metus sed ex interdum fermentum.
  
    <a href="#">
      A nested link
    </a>
   
  </p>
  
  <p>
    Some text with an image nested within a paragraph, which is nested within a div.
    <img src="https://placehold.it/50x50" />
  </p>
  
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item
      <ul>
        <li>Nested list item</li>
        <li>Nested list item</li>
        <li>Nested list item</li>
        <li>Nested list item</li>
      </ul>
    </li>
  </ul>
</div>

在CSS页面上的每个元素上添加叠加颜色

4 个答案: