Question

我不太擅长解释，但希望我可以通过一些漂亮的Photoshop来了解我的观点。

目前，当您将鼠标悬停在我的页面上时，它看起来像这样：

http://i.gyazo.com/086a81e116c55b2660689e3807b201ca.gif

但是我希望它在链接之外将鼠标悬停在整个页面上，有点像：

http://i.gyazo.com/f6523ae998ad826e6ad338c055f5ae3c.gif

以下是链接的代码，我非常确定我正在做正确的，但也许它会帮助我们。（我几乎没有过去＆＃34;初学者＆＃34;在编码领域。我通常可以绕过CSS，但这让我很难过。）

.linkage {
    width: 100%;
    height: 18px;
    z-index:999;
    margin-top: 10px;
    padding-top: 2px;
    background-color: transparent;
    text-align: center;
    font-size: 20px;
    font-family: arial;
}

.linkage a {
    color: #fcfcfc;
}

.linkage a:hover+.dim{
        color: #fff;
        font-size:30px;
    text-shadow: -2px 2px 8px #fff, 1px -1px 8px #fff;
}

.dim {
    width: 100%;
    height: 100%;
    z-index: -6;
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}

感谢您提供的任何帮助！

Answer 1

我猜，这就是你要找的东西。

＆＃13;

body {
  background-color: #bbb;
}
.links  {
  height: 3em;
}


.link {
  transition: font-size 500ms ease 0s;
  color: #666;
}
.link:hover { 
  font-size: 1.2em;
  color: white;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* relevant part */
.link:active {
  z-index: 5;
  text-shadow: 0 0 15px rgba(255,255,255,1);
}
/* adding pseudo element to "dim" the page on click */
.link:active::after {
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.4);
}

＆＃13;

  <div class="links">
  <a href="#" class="link">Lorem ipsum.</a>
  <a href="#" class="link">Ipsam, placeat!</a>
  <a href="#" class="link">Dicta, aliquam?</a>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sequi, vitae, numquam earum molestiae illo, sapiente delectus enim possimus quod incidunt hic ab neque eaque provident, consequatur sint. Nihil neque natus amet eaque dolorum accusantium voluptatem aspernatur! Voluptas pariatur qui possimus incidunt beatae in atque nobis nostrum, vero tempora porro, ipsum, adipisci. Quasi fugit amet facilis, aliquid dolores ab molestiae dolorem obcaecati quo, perferendis ullam quas harum iste! Aperiam sunt quis cumque culpa esse mollitia nam autem animi dolorum sequi, similique delectus laboriosam tenetur vel saepe. Ut enim facilis quia, iusto neque dolores. Similique dolores corporis totam nesciunt et tempora.</p>

＆＃13;

我是否可以仅使用CSS将鼠标悬停在页面的其余部分？

1 个答案: