jQuery 鼠标悬停行为 .hover ，mouseenter，mouseleave

悬停事件不仅能提示信息，还能实现下拉菜单和图片预览等很多功能，学习它毋庸置疑！！


首先是html代码：

<div id="banner">
<div id="logo"><img src="images/logo.jpg" title="何昊阳博客" alt="何昊阳博客"/></div>
<%=tip%>
</div>

要达到的目的：当鼠标移动到图片上时,有提示框出现。

方法一：使用原生javascript的mouseenter和mouseleave方法

$('#logo img').bind({
mouseenter:function(){
var tip = $(this).attr('title');
$('#logo').append('<p class="tip">'+tip+'</p>');
},
mouseleave:function(){
$('#logo .tip').hide();
},
});

方法二：使用jQuery的悬停（hover）事件（内部使用javascript的mouseenter和mouseleave方法）

$('#logo img').hover(
function(){
var tip = $(this).attr('title');
$('#logo').append('<p class="tip">'+tip+'</p>');
},
function(){
$('#logo .tip').hide();
}
);

后记：第一天学jQuery，我有一个问题：我在脚本里声明的变量如上文

var tip = $(this).attr('title');

我在 .jsp文件中能用<%=tip%>显示出来吗？求大神指教。。。