jQuery实现鼠标移入移出事件切换功能示例

本文实例讲述了框架实现鼠标移入移出事件切换功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' utf-8 '/script src=' http :http://libs。百度。com/jquery/1。8 .0/jquery。量滴js '/脚本样式# msg { color : # 3c 763d背景-颜色： # dff 0d 8；边框颜色： # d6e 9 c 6；边界半径： 4pxpadd : 15px }/style title/title script $(function(){ $(msg)).on({鼠标悬停在：函数上(){ $(this)).换行(' h1 ')；}，mouseout :函数(){ $(这个).unwrap()；} }) ;}) ;/脚本/头体p id='msg'Hello World！/p /body/htmlhover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

jQuery 1.7版本前该方法触发移入和离开事件事件。

jQuery 1.8版本后该方法触发鼠标悬停和鼠标移出事件。

注：关于爪哇岛描述语言事件说明可参考本站爪哇岛描述语言事件与功能说明大全：http://工具。JB 51。net/table/JavaScript _ event

！DOCTYPE html html head meta charset=' utf-8 '/script src=' http :http://libs。百度。com/jquery/1。7 .0/jquery。量滴js '/脚本样式# msg { color : # 3c 763d背景-颜色： # dff 0d 8；边框颜色： # d6e 9 c 6；边界半径： 4pxpadd : 15px }/style title/title script $(function(){ $(msg)).悬停(function(){ $(this)).换行(' h1 ')；}，function(){ $(this).unwrap()；} ) ;}) ;/脚本/头体p id='msg'Hello World！/p /body/html代码运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于框架相关内容还可查看本站专题： 《jQuery常见事件用法与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。