JQuery入门——事件切换之hover()方法应用介绍
2023-06-13 09:14:45 时间
1、在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle()。所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现。
2、示例代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>切换事件hover</title>
<scripttype="text/javascript"src="jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".clsTitle").hover(function(){
$(".clsContent").show();
},
function(){
$(".clsContent").hide();
})
})
</script>
</head>
<body>
<divclass="clsTitle">JQuery简介</div>
<divclass="clsContent">JQuery是由美国人JohnResig于2006年创建的一个开源项目,它的主旨是:以更少的代码,实现更多的功能</div>
</body>
</html>
3、效果图预览:
当鼠标移动到JQuery简介时:
相关文章
- jquery监听input值改变事件详解编程语言
- jQuery事件详解编程语言
- jQuery off()方法解除绑定事件
- jQuery判断元素上是否绑定了事件
- jQuery学习4浏览器的事件模型
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
- js,jQuery排序的实现代码,网页标签排序的实现,标签排序
- jquery笔记事件
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- JQuery常用方法和事件详细介绍
- jQuery绑定事件到动态创建的元素上的方法实例
- jquery中交替点击事件toggle方法的使用示例
- jquery新的绑定事件机制on方法的使用方法
- jQuery分别获取选中的复选框值的示例
- jquery用data方法获取某个元素上的事件
- jquery阻止后续事件只执行第一个事件
- jquery事件preventDefault()方法用法实例