今天我们用JQuery来实现鼠标悬停触发事件
完成效果：鼠标移动到控件上则触发一个效果（弹窗、显示图片等），鼠标移开则消失；
使用的对象：JQuery对象
详解：hover方法，在JQuery中被区分为事件，
$('#Llink').hover([over,]out)：
over:鼠标移到元素上要触发的函数（可选）；out:鼠标移出元素要触发的函数
over和out是两个函数名，也可以用匿名函数方法：
$('#Llink').hover(function(){...},function(){...});
如果over缺省：out 描述:hover()方法通过绑定变量"handlerInOut"来切换方法:$("td").bind("mouseenter mouseleave",handlerInOut);$("td").hover(handlerInOut);
代码实现：
<script type="text/javascript">
$('doocument').ready(function(){
function showImage () {
$('#imgDiv').css('display','block');
$('#img').attr('src','day/gem2.png');
}
function hideImage () {
$('#imgDiv').css('display','none');
$('#img').attr('src','');
}
$('#aLink').hover(showImage,hideImage);
});
</script>
<body>
<a href="javascript:void(0);" id="aLink">浏览</a>
<div id="imgDiv" style="display:none">
<img id="img" border="0" src="" ></img>
</div>
</body>
代码解释：$('doocument').ready(function(){...});作用是在html页面全部加载完成后才执行js代码，此处我们的触发事件要等到html加载完成后才有作用；
除了以上方法，还可以直接吧<script></script>块插入到html代码后面（不要这么写，尽量将script块写在head里）；
JQuery对象设置样式时，会屏蔽各浏览器的差别，通过使用$('#id').css(name,value)可以直接修改控件的style样式属性；
<div id="imgDiv" style="display:none">
<img id="img" border="0" src="" ></img>
</div>
悬停触发效果的对象是“浏览”这个连接字符串，在这里我们将href连接置空（javascript:void(0);点击后什么都不做）
首先要获取JQuery对象$('#aLink')；
图片被放在display属性为none的div块中，且src路径为空，即初始状态图片不会显示；
然后触发显示函数中 $('#imgDiv').css('display','block');使div块变为可见，再通过$('#img').attr('src','day/gem2.png');来追加src的内容为图片路径；
此函数完成后，图片控件即成为有文件路径的、并且可见的控件；
当鼠标移开时触发隐藏函数：用$('#imgDiv').css('display','none');重新将div置为不可见；
并且用$('#img').attr('src','');将路径置空（因为下次悬停又需要追加路径，如果不置空则会出错）；
如果我们用原生JavaScript来实现相同的功能，则代码修改为：
showImage函数中改为
var imgDiv = document.getElementById('imgDiv');
imgDiv.style.display = 'block';//设置imgDiv为可见
var imgObj = document.getElementById('img');
imgObj.src = 'day/gem2.png';//在imgObj加入一个图片
hideImage函数中改为
var imgDiv = //document.getElementById('imgDiv');
imgDiv.style.display = 'none';//设置imgDiv为可见
var imgObj = document.getElementById('img');
imgObj.src = '';//图片路径置空