如何设置鼠标移开后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

如何设置鼠标移开后css,如何设置鼠标离开时由hover设置的样式不变？相关推荐

css鼠标移入线条延中心伸长,jquery鼠标悬浮，显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点...
1.一个标题,鼠标悬浮时从图片中心伸出一个类似箭头指示的线条, 使用jquery hover添加类的方法给这个标题添加动画,动画是用css keyframes做的, 困惑的是有时候线条动画还没到终点鼠 ...
解决idea鼠标移开后自动预编译的问题
最近在运行Servlet程序时无意间设置错了热部署的方式,出现了这个问题,以下为解决方法 1. 点击运行配置 2. 设置切出IDE时不进行任何操作(do none)
CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示如下图鼠标点击后文字消失,鼠标移开后文字显示给input入下图添加代码 style="color:#cccccc; outline: ...
web前端中——this指向以及this的应用，函数的调用——this代码举例说明——举例：当鼠标划到列表上时，出现div内容，当鼠标移开列表时，div隐藏
一: //this:这个 //想要知道this代表着什么可以直接在中输入alert(this); //由此可以看出window是JS中的"老大" eg:alert(1);其实就是w ...
解决网页播放【鼠标移开屏幕或点击屏外视频暂停播放】
解决网页播放[鼠标移开屏幕或点击屏外视频暂停播放] 亲测有效,亲测有效,亲测有效, 当我们有时看视频时遇到以下问题,当我们点击视频播放后,视频开始播放,可当我们将鼠标移动出浏览器,或将鼠标切换到其他页 ...
（idea）设置鼠标移到类、方法、变量上时，显示相关提示信息
1.ctrl + alt + s 快捷键,打开Settings设置面板,勾选上Show quick decumentation on mouse move选项 (别忘了点OK哦) 2.进行上诉设置后, ...
鼠标移上去后自动会弹出一个框
鼠标移上去后自动会弹出一个框,位置随鼠标位置的改变而改变,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
ExtJS4.2 menu鼠标移开隐藏
隐藏如下面这个东西: 实现鼠标移开菜单内容时会隐藏,还有缺陷是点击开启菜单,不经过菜单就移开鼠标,则无法出发监听: mouseleave( Ext.menu.Menu menu, Ext.EventO ...
鼠标移开事件（onmouseout）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

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

如何设置鼠标移开后css,如何设置鼠标离开时由hover设置的样式不变？相关推荐

最新文章

热门文章