jquery bind click mouseout hover mouseover事件

最新推荐文章于 2021-07-01 10:10:51 发布
最新推荐文章于 2021-07-01 10:10:51 发布
阅读量4.7k 收藏
点赞数
分类专栏： jquery 文章标签： jquery jQuery JQUERY Jquery JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G631233828/article/details/8455825
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<style type="text/css"> 
.highlight{
background:#FF3300;
}
</style> 


<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){


$("#panel h5.head").bind("click",function(){
if($(this).next("div.content").is(":visible")){
$(this).next("div.content").hide();
}else{
//$(this).next("div.content").show();
//$(this).next("div.content").fade(2000);
$(this).next("div.content").slideDown(100);
}
})

$("#panel1 h5.head1").bind("mouseout",function(){
$(this).next("div.content1").hide();
})
$("#panel1 h5.head1").bind("mouseover",function(){
$(this).next("div.content1").show();
})




$("#panel2 h5.head2").hover(function(){
$(this).next("div.content2").show();
},function(){
$(this).next("div.content2").hide();
})







$("#panel3 h5.head3").mouseover(function(){
$(this).next("div.content3").show();
})

$("#panel3 h5.head3").mouseout(function(){
$(this).next("div.content3").hide();
})


$("#panel4 h5.head4").toggle(function(){
$(this).addClass("highlight")
$(this).next("div.content4").show();
},function(){
$(this).removeClass("highlight");
$(this).next("div.content4").hide();
})
$("#panel5 h5.head5").bind("mouseout mouseover",function(){
if($(this).next("div.content5").is(":visible")){
$(this).next("div.content5").hide();
}else{
$(this).next("div.content5").show();
}
})



 
})

</script>






<body>
<div id="panel">


<h5 class="head">点击一下吧</h5>
<div class="content" style="display:none">
点击之后我出来了
</div>
</div>
<div id="panel1">


<h5 class="head1">鼠标移到这现实</h5>
<div class="content1" style="display:none">
我显示了
</div>
</div>
<div id="panel2">


<h5 class="head2">使用了hover(自定义方法)</h5>
<div class="content2" style="display:none">
我显示了
</div>
</div>


<div id="panel3">


<h5 class="head3">使用了mouseout,mouseover</h5>
<div class="content3" style="display:none">
我显示了
</div>
</div>


<div id="panel4">


<h5 class="head4">使用toggle</h5>
<div class="content4" style="display:none">
我显示了
</div>
</div>
<div id="panel5">


<h5 class="head5">bind绑定多个事件</h5>
<div class="content5"style="display:none" >
我显示了
</div>
</div>
</body>

</html>

欢迎大家加入java资源免费分享群，群号：814657026

fliay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈jQuery中的事件
10-24
例如，`hover()`方法是`mouseover`和`mouseout`事件的组合： ```javascript $("#element").hover(function() { // 鼠标进入时的处理 }, function() { // 鼠标离开时的处理 }); ``` ### 3. 事件冒泡 事件冒泡是指...
jQuery学习5 jQuery事件模型
12-10
3. **标准事件类型**：jQuery遵循W3C的DOM事件模型，使用如`click`、`mouseover`、`mouseout`等标准事件名称，而不是浏览器特有的事件名。 4. **Event对象作为参数**：在jQuery事件处理程序中，`Event`实例通常作为...
jQuery 事件 方法
weixin_30326741的博客
06-03 143
jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法描述 bind() 向元素添加事件处理程序 blur() 添加/触发 blur 事件 change() 添加/触发 change 事件 click() 添加/触发 click 事件 db...
jquery mouseover和hover的区别
jshmqjw的专栏
04-15 895
前段最近用了很多，但是学无止境啊，做项目的时候想要让鼠标悬停在某个区域触发一系列事件。想也没想就用mouseover来实现。 $(".download_area > div").mouseover(function(){ $(".download_area img").attr("src", "static/images/download.png"); $(this).children(
jQuery中常用的事件处理方法（click、mouseover、mouseout、bind、one、live、unbind）
越努力越幸运的博客
07-01 649
文章目录jQuery中常用的事件处理方法clickmouseovermouseoutbindoneunbindlive jQuery中常用的事件处理方法 click 作用：用于绑定单击事件以及触发单击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text
jQuery 绑定3种鼠标事件 click(鼠标点击)，mouseover(鼠标移入)，mouseout(鼠标移开)
旭东怪的博客
09-01 6094
1 click() 说明：鼠标点击时触发click事件。 语法： $(selector).click(function1); 实例： 文本框绑定click事件。 $(function(){ $("input[type=text]").each(function(){ $(this).click(function(){ alert("text click"); }); }); }); 2 mouseover() 说明：当
关于 jquery bind()方法中不能绑定hover事件
Wenny
06-24 2645
简单来说就是使用下面这种方式替换 使用 mouseenter 和 mouseleave 这两个事件来代替 (ps:同时这也是 .hover() 函数中使用的事件)  .hover()事件是jquery自定义函数 就相当于mouseenter 和 mouseleave 这两个事件    它并非一个真正的事件   所以不能在bind()方法中当作参数使用。
jQuery使用手册之 事件处理
10-30
1. **`hover()`**: `hover()` 方法允许你同时设置鼠标悬停（mouseover）和离开（mouseout）事件的处理函数。例如，当你在ID为"a"的元素上悬停时，元素会添加红色样式，当鼠标离开时，样式会被移除。 2. **`toggle()...
详解jQuery中的事件
10-20
`hover()`方法可以同时处理`mouseover`和`mouseout`事件，使元素在鼠标进入和离开时触发不同的行为。例如，`$('#div1').hover(function() {...}, function() {...})`会在鼠标进入和离开`#div1`时分别显示和隐藏其...
[jQuery] 事件和动画详解
10-17
- `hover()`: 这个方法结合了`mouseover`和`mouseout`事件，例如`$("#mydiv").hover(function() {}, function() {})`，当鼠标进入元素时执行第一个函数，离开时执行第二个。 - `toggle()`: 它可以切换执行一系列函数...
jquery方法mouseenter与mouseover的区别
干勾鱼的CSDN博客
10-21 1651
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52883549 本文出自【我是干勾鱼的博客】 mouseover()方法相信大家都用过，当鼠标的指针位于元素上方时，会发生 mouseover事件，比如：$("div").mouseover(function(){ $("div").css("background-colo
jQuery 事件 - mouseover() 方法
xygg0801的博客
04-13 1505
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;$(document).ready(function(){  $("p").m
jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）
不动声色的小蜗牛的博客
07-19 2463
一、bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数。 也可以同时给一个元素绑定多个事件，我们来看一下例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" >&lt
jQuery中hover与mouseover与mouseenter的区别
Lankecms
10-17 7037
以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。但这两个并不能等同。 在wrapper上加事件，当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和 mouseout事件的话，当鼠标移动到wrapper层后，point层会变大， 但当鼠标在img和text层之间进行移
jquery用 bind 函数给元素绑定点击事件
u010872394的专栏
05-30 3249
$("p").bind("click", function(){ alert( $(this).text() ); });
JavaScript中mouseover和mouseout多次触发解决办法
热门推荐
hsd2012的专栏
06-12 2万+
mouseover和mouseout多次触发原理分析；mouseenter与mouseleave实现分析；判断两个元素是否存在包含关系；compareDocumentPosition介绍；获取兼容性性的relatedTarget；改进mouseover和mouseout使其具备mouseenter与mouseleave效果效果；对改写的代码进行封装等。
jquery中取消和绑定hover事件的正确方式
说：/~不了的专栏
10-16 1万+
在网页设计中，我们经常使用jquery去响应鼠标的hover事件，和mouseover和mouseout事件有相同的效果，但是这其中其中如何使用bind去绑定hover方法呢？如何用unbind取消绑定的事件呢？ 一、如何绑定hover事件 先看以下代码，假设我们给a标签绑定一个click和hover事件： $(document).ready(function(){ $('a').bind(
hover不能做事件委托
qq_36358940的博客
07-29 1396
动态生成的元素做事件委托 正确写法：$(document.body).on('mouseenter',"#newslist li:not(:first)",function(e){ $(this).css("background-color","#EC4413"); $(this).children().css("color","#ffffff"); }); $(document
JavaScript-绑定事件的三种方式（原生方式和bind方法）
paku-san的博客
05-30 4124
事件绑定的三种方式第一种直接在标签中绑定事件第二种1. 原生JavaScript代码实现2. 使用JQuery对象转换成JavaScript对象实现第三种1.使用click方法2.使用bind方法a.绑定一个事件b.绑定多个事件取消绑定事件 第一种 直接在标签中绑定事件 <!DOCTYPE html> <html> <head> <meta char...
jquery click 事件 传参数
最新发布
09-01
在jQuery中，可以通过click事件来为元素添加点击事件处理程序。通过click事件传递参数有多种方式。...以上是两种常见的传递参数给jQuery的click事件的方法，根据具体的使用场景选择合适的方法来传递参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值