盒子阴影覆盖我的整个页面的问题

Question

目前正在处理一个光标，当将鼠标悬停在 div 上时，它会在 div 中显示文本，并使用 box-shadow 隐藏 div 的其余部分。我的问题是盒子阴影覆盖了我的整个页面，我只想覆盖显示文本的 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>

Answer 2

这应该可以解决问题

.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;
    }
.list{
  transition: all 1s ease;
}
.list:hover{
  box-shadow: 0 0 0 9999px #2D2D2D;
}

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

.list{
  transition: all 1s ease;
}
.list:hover{
  box-shadow: 0 0 0 9999px #2D2D2D;
}