html - box-shadow 覆盖我整个页面的问题

Question

目前正在处理一个光标，该光标在悬停在 div 上时显示文本，并使用 box-shadow 隐藏 div 的其余部分。我的问题是 box-shadow 覆盖了我的整个页面，我只想覆盖显示文本的 div。

我试过使用 z-index 解决这个问题，但我认为给每个元素一个带有 z-index 的位置并不是一个好主意。所以我一直在尝试使用相对位置，它不会隐藏页面的其余部分，但是当鼠标悬停在它上面时它不会显示文本。

应该在将光标悬停在它上面时执行此操作，而不会像第二张图片那样覆盖其余部分

但是当我在 .test 中输入 position: relative; 时它不会显示文本

.container .pageBlock .googleBlock {
      width: 1100px;
      margin: 0 auto;
      padding: 0 30px;
      max-width: 100%;
      box-sizing: border-box;
      cursor: url(../img/vergrootglas.png) 55 30, auto;
    }
    .container .pageBlock .googleBlock .title {
      font-size: 14px;
      font-weight: 200;
      margin-left: 40px;
    }
    .container .pageBlock .googleBlock .test {
      overflow: hidden;
      position: relative;
    }
    .container .pageBlock .googleBlock .test .cursor {
      position: absolute;
      z-index: 1;
      background: transparent;
      width: 35px;
      height: 35px;
      opacity: 0.9;
      border-radius: 50%;
      box-shadow: 0 0 0 9999px #2D2D2D;
    }
    .container .pageBlock .googleBlock .test #maskOverlay {
      width: 100%;
      height: 100%;
    }
    .container .pageBlock .googleBlock .test .wrapper {
      list-style: none;
      display: inline-block;
      width: 33%;
      position: relative;
    }
    .container .pageBlock .googleBlock .test .wrapper .list ul {
      list-style: none;
    }
    .container .pageBlock .googleBlock .test .wrapper .list ul > li:before {
      content: "- ";
    }
    .container .pageBlock .googleBlock .test .wrapper .list li {
      line-height: 28px;
    }

<section class="googleBlock">
  <h1 class='title'>Oh ja, en voor <strong>Google</strong>, voor als je mee leest...</h1>
  <div class="test">
      <div id="maskOverlay">
          <div class="wrapper">
              <div class="list">
                  <ul>
                      <li>Website laten maken</li>
                      <li>Online marketing bureau</li>
                      <li>Website maker</li>
                      <li>Website bouwen</li>
                      <li>Webdesign</li>
                      <li>Digital agency</li>
                      <li>Websites</li>
                  </ul>
              </div>
          </div>
          <div class="wrapper">
              <div class="list">
                  <ul>
                      <li>Grafisch ontwerper</li>
                      <li>Serious Game</li>
                      <li>Design bureau</li>
                      <li>Grafisch vormgever</li>
                      <li>Interactief</li>
                      <li>Kwaliteit</li>
                      <li>Interactieve communicatie</li>
                  </ul>
              </div>
          </div>
          <div class="wrapper">
              <div class="list">
                  <ul>
                      <li>Digital awesomeness</li>
                      <li>Custom website</li>
                      <li>Gaming</li>
                      <li>Technologie</li>
                      <li>Strategie</li>
                      <li>Branding</li>
                      <li>Digitale campagnes</li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="cursor"></div>
  </div>
</section>

Answer 1

你想要这样的东西吗？

.list:hover {
  background-color: grey;
}

.points:hover {
  color: white;
}

    <section class="googleBlock">
                            <h1 class='title'>Oh ja, en voor <strong>Google</strong>, voor als je mee leest...</h1>
                            <div class="test">
                                <div id="maskOverlay">
                                    <div class="wrapper">
                                        <div class="list">
                                            <ul>
                                                <li class="points">Website laten maken</li>
                                                <li class="points">Online marketing bureau</li>
                                                <li class="points">Website maker</li>
                                                <li class="points">Website bouwen</li>
                                                <li class="points">Webdesign</li>
                                                <li class="points">Digital agency</li>
                                                <li class="points">Websites</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="wrapper">
                                        <div class="list">
                                            <ul>
                                                <li class="points">Grafisch ontwerper</li>
                                                <li class="points">Serious Game</li>
                                                <li class="points">Design bureau</li>
                                                <li class="points">Grafisch vormgever</li>
                                                <li class="points">Interactief</li>
                                                <li class="points">Kwaliteit</li>
                                                <li class="points">Interactieve communicatie</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="wrapper">
                                        <div class="list">
                                            <ul>
                                                <li class="points">Digital awesomeness</li>
                                                <li class="points">Custom website</li>
                                                <li class="points">Gaming</li>
                                                <li class="points">Technologie</li>
                                                <li class="points">Strategie</li>
                                                <li class="points">Branding</li>
                                                <li class="points">Digitale campagnes</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="cursor"></div>
                            </div>
                        </section>