Jquery 悬停事件
来源:互联网 发布:csgo fps优化脚本 编辑:程序博客网 时间:2024/05/29 13:23
hover事件就是鼠标悬停事件。此外,你还可以额外传递给事件处理函数一些数据。
此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发hover事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过hover()
绑定的事件,请使用unbind()函数。
该函数属于jQuery
对象(实例)。
语法
hover()
函数主要有以下两种用法:
用法一:
jQueryObject.hover( handlerIn , handlerOut )
分别指定鼠标移入、移出元素时的事件处理函数。
用法二:jQuery 1.4 新增支持该用法。
jQueryObject.hover( handlerInAndOut )
用法一的变体。当鼠标移入、移出元素时的事件处理函数相同时,只需直接传入一个处理函数作为参数即可。
参数
请根据前面语法部分所定义的参数名称查找对应的参数。
hover()
函数的所有参数都是函数,函数内的this
指向当前DOM元素。hover()
还会为其传入一个参数:表示当前事件的Event对象。
返回值
hover()
函数的返回值为jQuery类型,返回当前jQuery对象本身。
示例&说明
hover()
函数与on()函数具有以下等价代码:
$( selector ).hover( handlerInOut );// 等价于$( selector ).on( "mouseenter mouseleave", handlerInOut );
请参考下面这段初始HTML代码:
<a id="a1" href="http://www.365mini.com">CodePlayer</a><a id="a2" href="http://www.365mini.com/doc">中文手册</a>
现在,我们为所有a元素的hover事件绑定处理函数(可以绑定多个,触发时按照绑定顺序依次执行):
// 为所有button元素的hover事件绑定处理函数// 鼠标移入链接时,显示红色;移出链接时,显示蓝色$("a").hover( function(event){ $(this).css("color", "red"); }, function(event){ $(this).css("color", "blue");} );// 为所有button元素的hover事件绑定处理函数// 鼠标移入、移出链接时,都去掉下划线$("a").hover( function(event){ $(this).css("textDecoration", "none");} );
$(document).ready(function()
{
var isShow=false;
$("#hidden_menu").hide();
$("#categort").mouseover(function(){
$("#hidden_menu").show();
});
$("#hidden_menu").mouseover(function(){
isShow=true;
$(this).show();
});
$("#hidden_menu").mouseout(function(){
if(isShow)
{
$(this).hide();
isShow=false;
}
});
})
</
script
>
<
div
id
=
"categort"
><
a
href
=
"#"
>category</
a
></
div
>
<
div
id
=
"hidden_menu"
>
<
div
class
=
"round_corner_left"
></
div
>
<
div
class
=
"round_corner_reeat"
><
a
>
这里历遍数据库得到的各种分类名称<
/
a
></
div
>
<
div
class
=
"round_corner_right"
></
div
>
</
div
>
=======================================================
$(function(){
Hover("tableTest")//调用方法
})
var Hover=function(id){
$("#"+id).find("tr").hover(function(){
$(this).css({"backgruond-color","pink"});//当鼠标移进的时候触发事件A
},function(){
$(this).css({"backgruond-color",""});//当鼠标移出的时候触发事件B
})
}
- Jquery 悬停事件
- Jquery表格宽度控制,初始化悬停事件
- jQuery鼠标悬停事件.hover()用法说明
- jquery的主要事件--单击双击,焦点,悬停
- Jquery中的事件处理(自动触发事件,禁用按钮,悬停,失焦,滑动效果)
- 鼠标悬停事件
- 笔记-鼠标悬停事件
- css 鼠标悬停事件
- hover鼠标悬停事件
- unity 鼠标悬停事件
- selenium 鼠标悬停事件
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
- jquery鼠标悬停和离开事件(可用于下拉菜单等)
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
- jquery鼠标悬停和离开事件(可用于下拉菜单等)
- 鼠标悬停,延后触发事件
- JQuery方向意识悬停 HoverDir
- linux下压缩与解压(zip、unzip、tar)详解
- 给 Android 开发者的 RxJava 详解
- Android自定义曲线路径动画框架
- 指针和指针数组
- DS18B20驱动学习笔记(一)
- Jquery 悬停事件
- 个人博客---简要总结(一)
- flume 1.6和1.7在windows环境下的安装
- kero快速上手
- 402_debug查看局部变量
- JavaWeb学习笔记04-js的对象
- Ubuntu下的sublime text 2的安装和破解
- linux进程控制
- 多对多数据库创建方式Django