最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!
用CSS可以实现你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果，是不是太方便了点？但很遗憾，要把RevealTrans滤镜用于网页中的某个对象就没有这么简单了，它必须借助于Javascript来调用其方法，才能实现，这就是说要动手编程序了。但也不是太难，下面我将通过一个制作动态字幕变换的例子来说明其使用方法。
渐淡字幕变换效果
这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果，请看下面的效果图：
<!--
.mytrans { filter:revealTrans(Transition=12,Duration=2)}
-- >
</style >
2、插入一个层，我们把层的“Layer ID”改为“div1”（可直接在层的属性面板上加入即可），并设置好层的背景和调整好层的大小，并把Revealtrans滤镜加载到到层上，这时你看到的层的标记代码是这样的：<div id="div1" style="position:absolutewidth:680pxheight:30pxz-index:37background: #FFFFCClayer-background-color: #FFFFCCborder: 1px none #000000" class="mytrans" ></div >
3、在网页源代码的<head >与</head >之间插入下面这段Javascript程序：
<script language="JavaScript" >
<!--
function HelpArray(len)
{
this.length=len
}
// 建立一个数组，存放转换的内容。
HelpText=new HelpArray(5)
HelpText[0]="在一个文档使用动态转换的滤镜（Revealtrans）其实是很容易的。"
HelpText[1]="首先，为对象的样式表单建立一个需要转换的“Revaltrans"滤镜，"
HelpText[2]="然后，使用“apply()"方法防止错误，"
HelpText[3]="现在，你可以改变任何你想改变的东西，"
HelpText[4]="最后，“play()"方法开始进行转换。"
ScriptText=new HelpArray(5)
var i= -1
// 显示转换效果
function playHelp()
{
if (i==4)
{ i=0 }
else
{ i++}
div1.filters[0].apply()
div1.innerText=HelpText[i]
div1.filters[0].play()
// 设置每段字幕演示的时间，以毫秒计。这里的时间要长于滤镜中的时间，以保证在转换结束后能停留一段时间。
// 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒，滤镜中设置的转换时间是2秒。
mytimeout=setTimeout("playHelp()",6000)
}
-- >
</script >
4、在网页的源代码的<body >中加入这样一句代码：onload="playHelp()"。
到此，可以按F12看效果了，好象也不是太难。你若是想看看其它的转换效果，只要改变一下Revealtrans滤镜中的Transition参数值就行了，其它什么也不用改动，你瞧多方便！用它来作广告条我想效果不会差。比起动画来可瘦小多了。
当然Revealtrans滤镜同样也可以用于图片，效果也不错，但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜，用它做图片的淡入淡出效果相当不错，
首先要用到dw软件
这里是头部的书写方式
这个地方是body的书写格式
整个代码的书写就是这样了，如果图片还不够清楚的话，我吧代码复制给你，方便操作
<!DOCTYPE html>
<html>
<head><!-- 这里是头部的开始部分 -->
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle()
$("#div2").fadeToggle("slow")
$("#div3").fadeToggle(3000)
})
})
</script>
</head><!-- 这里是头部的结束 -->
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br><!-- 这里是3个方块的淡出淡入效果 -->
<div id="div1" style="width:80pxheight:80pxbackground-color:red"></div>
<br>
<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>
<br>
<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>
</body>
</body>
</html>
5.最后的实际效果，从浓到淡。
