今天是: 2020年07月13日 星期一

您现在的位置是:
首页 » 技术分享 » 纯css代码让鼠标滑过div显示和隐藏

纯css代码让鼠标滑过div显示和隐藏

《纯css代码让鼠标滑过div显示和隐藏》

很多同学在做div显示和隐藏效果时,第一时间会想到用我们最喜欢的js和jq。当然用这两种也是极好的,今天给大家介绍下用春css代码写,也可以有相同的效果,对于js不熟的同学来说,是很有帮助的。

给需要被显示和隐藏的div加上以下css样式代码:

{
filter: progid:DXImageTransform.Microsoft.Shadow(color=#4c91c0, direction=120, strength=5);
opacity: 0;
visibility: hidden;
transition: all .6s ease 0s;
transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}

给滑动的div加以下css样式代码,一般用hover :

{
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}

当然先要给被隐藏和显示的div加上基本样式,在用上面的代码,还会有一个过度的效果哦,是不是很方便呢

点赞