最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!
@keyframes anim{
from {opacity: 1}
to {opacity: 0}
}
.anim-welcome
{
animation: anim 3s
}
执行时,为需要淡出的节点添加样式anim-welcome,兼容其他浏览器请自查;
该法为css3实现,不管如何兼容IE9-是无效的,全兼容需脚本支持:
$('#node').fadeout()
无论css还是js,都有好多种方法能实现,写个简单的例子给你
jquery写法(需要加载jquery文件),如下:
<h1 class="demo">测试文字,测试文字,测试文字</h1> $(".demo").hover(function(){$(this).fadeOut(1000)
})
css写法,如下:
<h1 class="demo">测试文字,测试文字,测试文字</h1> .demo{transition: 1s
-moz-transition: 1s
-webkit-transition: 1s
-o-transition: 1s
}
.demo:hover{
opacity: 0
}