Question

当前使用的游标是将鼠标悬停在div上时显示div中的文本，并用框阴影隐藏div的其余部分。我的问题是盒子阴影覆盖了我的整个页面，而我只想覆盖显示文本的div。

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

假设用鼠标悬停在光标上而没有像第二张图片那样覆盖其余部分时执行此操作

但是当我将.test放在.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; }的{{1}}中时，它不会显示文本

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

<div class="entry-content">
<div class="job_listings" data-location="" data- 
keywords="" data-show_filters="true" data- 
show_pagination="false" data-per_page="10" data- 
orderby="featured" data-order="DESC" data-categories="" 
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords" 
id="search_keywords" placeholder="Keywords" value="" 
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location" 
id="search_location" placeholder="Location" value="" />
</div>

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

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

2 个答案: