css 鼠标离开样式,如何设置鼠标离开时由hover设置的样式不变？

1.用js添加延时处理

#div1{

height: 100px;

width: 100px;

background: #000000;

position: relative;

}

#div2{

height: 200px;

width: 100px;

background: #00A1D6;

display: none;

position: absolute;

left: 0;

top: 130px;

}

window.οnlοad=function(){

var a=document.getElementById('div1')

var b=document.getElementById('div2')

var x=null

b.οnmοuseοver=a.οnmοuseοver=function(){

b.style.display='block';

clearTimeout(x);

}

b.οnmοuseοut=a.οnmοuseοut=function(){

x=setTimeout(function(){b.style.display='none';

},1000)

}

}

2.css，与目标没间隙的话把隐藏框放在你hover的目标中，用absolute定位，hover目标display:block;

3.css，有间隙的话用伪元素

#div1{

height: 100px;

width: 100px;

background: #000000;

position: relative;

}

#div2{

height: 0px;

width: 100px;

background: #00A1D6;

position: absolute;

left: 0;

top: 130px;

transition: all 0.4s ease;

overflow: hidden;

}

#div2:before{

background: transparent;

position: absolute;

top: -30px;

left: 0;

display: block;

height: 30px;

width: 100%;

}

#div1:hover #div2{

height: 300px;

overflow: visible;

}

#div1:hover    #div2:before{

content: '';

}

111