我是否可以使用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>