HTML – 模糊 Unblur 2悬停时的不同背景

概述在我的代码上,我将浏览器宽度划分为2个div.我计划在每个div上应用一个超链接,比如2个大按钮,但在此之前,我想对它们应用一些webkit-filter,因此它们作为按钮变得更加直观. 如何在这些div上应用超链接并在悬停时应用blur / unblur而不模糊文本？ 这是我到目前为止使用的代码： (仅用于测试目的的图像：P) #containergaleria { display: t 在我的代码上,我将浏览器宽度划分为2个div.我计划在每个div上应用一个超链接,比如2个大按钮,但在此之前,我想对它们应用一些webkit-filter,因此它们作为按钮变得更加直观.

如何在这些div上应用超链接并在悬停时应用blur / unblur而不模糊文本？

这是我到目前为止使用的代码：
(仅用于测试目的的图像：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  align="right"><a  href="https://stackoverflow.com/" target="_blank">IMAGENS</a>&nbsp;&nbsp;</p></div>      <div ID="vIDeos"><p align="left">&nbsp;&nbsp;<a  href="https://stackoverflow.com/" target="_blank">VÍDEOS</a></p></div>  </div>

解决方法 你可以通过使用背景：在CSS上的元素之前完成它.

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

检查以下小提琴：
https://jsfiddle.net/k486zf3w/

总结

以上是内存溢出为你收集整理的HTML – 模糊/ Unblur 2悬停时的不同背景全部内容，希望文章能够帮你解决HTML – 模糊/ Unblur 2悬停时的不同背景所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。