html鼠标悬停模糊,模糊效果鼠标悬停清晰

Html

Css

Js

标题1

这是第1格

标题2

这是第2格

标题3

这是第3格

标题4

这是第4格

标题5

这是第5格

标题6

这是第6格

标题7

这是第7格

标题8

这是第8格

/*

* 模糊图片鼠标悬停清晰

*/

#ul1 {

width:1040px;

margin:40px auto;

}

#ul1 li {

width:200px;

height:200px;

background:white;

float:left;

margin:10px;

list-style:none;

padding:20px;

box-shadow:2px 2px 2px #999;

-webkit-transition:0.5s all linear;

-moz-transition:0.5s all linear;

-ms-transition:0.5s all linear;

-o-transition:0.5s all linear;

}

#ul1 li h2 {

font-size:24px;

line-height:40px;

}

#ul1 li p {

font-size:12px;

line-height:18px;

}

#ul1 .back {

text-shadow:0 0 10px black;

-webkit-transform:scale(0.9);

-moz-transform:scale(0.9);

-ms-transform:scale(0.9);

-o-transform:scale(0.9);

box-shadow:0 0 10px 4px white;

opacity:0.8;

color:rgba(0,0,0,0);

}

#ul1 .active {

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-ms-transform:scale(1.1);

-o-transform:scale(1.1);

box-shadow:3px 3px 4px #888;

}

/*

* 模糊图片鼠标悬停清晰

*/

#ul1 {

width:1040px;

margin:40px auto;

}

#ul1 li {

width:200px;

height:200px;

background:white;

float:left;

margin:10px;

list-style:none;

padding:20px;

box-shadow:2px 2px 2px #999;

-webkit-transition:0.5s all linear;

-moz-transition:0.5s all linear;

-ms-transition:0.5s all linear;

-o-transition:0.5s all linear;

}

#ul1 li h2 {

font-size:24px;

line-height:40px;

}

#ul1 li p {

font-size:12px;

line-height:18px;

}

#ul1 .back {

text-shadow:0 0 10px black;

-webkit-transform:scale(0.9);

-moz-transform:scale(0.9);

-ms-transform:scale(0.9);

-o-transform:scale(0.9);

box-shadow:0 0 10px 4px white;

opacity:0.8;

color:rgba(0,0,0,0);

}

#ul1 .active {

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-ms-transform:scale(1.1);

-o-transform:scale(1.1);

box-shadow:3px 3px 4px #888;

}

/*

* 模糊效果鼠标悬停清晰

*/

window.onload = function() {

var aLi = document.getElementsByTagName('li');

var timer = null;

var i = 0;

for (i = 0; i < aLi.length; i++) {

aLi[i].onmouseover = function() {

clearTimeout(timer);

for (i = 0; i < aLi.length; i++) {

aLi[i].className = 'back';

}

this.className = 'active';

};

aLi[i].onmouseout = function() {

clearTimeout(timer);

timer = setTimeout(function() {

for (i = 0; i < aLi.length; i++) {

aLi[i].className = '';

}

}, 200);

};

}

};