css - 我可以仅使用 CSS 使悬停时页面的其余部分变暗吗？

Question

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

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

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

但我希望它在悬停时使整个页面在链接旁边变暗，有点像:

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

下面是链接的代码，我很确定我几乎没有做任何事情正确，但也许它会有所帮助。 (在编码的世界里，我还算不上“初学者”。我通常可以掌握 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

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

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

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