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

来源：互联网发布：淘宝海报设计教程编辑：程序博客网时间：2024/05/21 06:02

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

首先是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%>显示出来吗？求大神指教。。。

0 0