在我的代码中,我将浏览器宽度划分为 2 个 div。我计划对每个 div 应用一个超链接,比如 2 个大按钮,但在此之前,我想对它们应用一些 webkit-filter,这样它们作为按钮会更直观。
如何将超链接应用到这些 div 并在悬停时应用模糊/取消模糊而不模糊文本?
以下是我目前使用的代码: (图片仅用于测试目的:P)
#containergaleria {
display: table;
width: 100%;
}
#containergaleria div {
display: table-cell;
width: 50%;
}
#imagens {background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
background-position: right center;
}
#videos {background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
background-position: left center;
}
p.centertext {
margin-top: 25%;
margin-bottom: 25%
}
body {
overflow:hidden;
}
<div id="containergaleria">
<div id="imagens"><p class="centertext" align="right"><a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">IMAGENS</a> </p></div>
<div id="videos"><p align="left"> <a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">VÍDEOS</a></p></div>
</div>
最佳答案
你可以通过在 css 的 :before 元素上使用背景来做到这一点。
#imagens:before,
#videos:before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
transition: all .5s ease;
-webkit-transition: all .5s ease;
filter: blur(0);
-webkit-filter: blur(0);
}
#imagens:hover:before,
#videos:hover:before {
filter: blur(2px);
-webkit-filter: blur(2px);
}
#imagens:before {
background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
background-position: right center;
}
#videos:before {
background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
background-position: left center;
}
检查以下 fiddle : https://jsfiddle.net/k486zf3w/
关于html - 悬停时模糊/取消模糊 2 个不同的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34867551/