jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
用一个有背景的盒子为例子，加上margin-top的动画效果，使鼠标放在盒子上时，让margin-top的值变化而看到盒子上下移动；加上子盒子son后，观察鼠标移入移出小盒子中时的变化；以及解决方案：加入stop()的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){ /* 进入子元素时会触发，这样写的话有一个bug，当鼠标快速移入移出目标区域时，目标区域会一直变换样式直到实现所有的效果次数。
加上stop()后，解决上面的bug $('#div1').mouseover(function(){
$(this).animate({marginTop:50});
}); $('#div1').mouseout(function(){
$(this).animate({marginTop:100});
}); */ /*
当box盒子里面有一个子元素son盒子时，当鼠标移入移出子元素时，也会触发上面的bug的动画效果
若想消除这个问题，需要用到mounseenter, mouseleave，这样进入子元素时不会触发bug效果 $('#div1').mouseenter(function(){
$(this).stop().animate({marginTop:50});
}); $('#div1').mouseleave(function(){
$(this).stop().animate({marginTop:100});
});
*/ /* 通过hover简写上面的代码，其实就是hover()里面写2个function()作为参数 */
$('#div1').hover(function(){
$(this).stop().animate({marginTop:50});
},function(){
$(this).stop().animate({marginTop:100});
}); }) </script>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
margin:100px auto 0; //居中
} .son{
width:100px;
height:100px;
background-color:green;
} </style>
</head>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
</html>
jquery事件一 ---鼠标移入移出的更多相关文章
- Jquery事件：鼠标移入移出(mouseenter,mouseleave)
前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...
- jQuery鼠标移入移出(冒泡版和无冒泡版)
带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- Vue中通过鼠标移入移出来添加或取消class样式（active）
基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
随机推荐
- Android开发实战之ViewPager的轮播
在安卓开发的许多控件中,如果你没有使用过ViewPager,就不能算是一个安卓开发工程师,在本篇博文中,我会总结ViewPager的使用方法, 以及一些开发中的拓展.希望本篇博文对你的学习和工作有所帮 ...
- Spark 性能相关参数配置详解－Storage篇
随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化. 由于篇 ...
- 浅谈利用PLSQL的多线程处理机制，加快处理大数据表的效率
我们在处理大数据表的时候经常会感觉的处理速度不够快,效率不够高,那么今天下面我就来简单实现下PLSQL的多线程编程处理数据: 我模拟一个简单的场景,把某一张表中的数据(当然这张表的数据非常大)同步到目 ...
- duilib界面库
xml编写界面库 notify控制程序 win32程序 winmain主函数 复杂控件自绘
- jquery Ajax跨域请求
这是jquery api文档对跨域请求的解析:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用JSONP类型.使用这种类型的话,会创建一个查询字符串参数 callbac ...
- SetDns.bat 2014-03-28 20:00:19
此BAT文件,可以帮助便捷切换dns设置,Win7系统需使用管理员身份运行. @echo off echo 设置为GoogleDNS(1)/dhcp(2)/OpenDNS(3) set /p sel= ...
- Java Persistence with MyBatis 3(中文版) 第二章 引导MyBatis
MyBatis最关键的组成部分是SqlSessionFactory,我们可以从中获取SqlSession,并执行映射的SQL语句.SqlSessionFactory对象可以通过基于XML的配置信息或者 ...
- Spring MVC 小计
前端控制器是DispatcherServlet 应用控制器 1 处理器映射器(Handler Mapping) 进行处理器管理 2 视图解析器(View Resolver) ...
- mysql - 简单的触发器和存储过程
delimiter // drop PROCEDURE proc_member_preprocessor;// )) main:BEGIN SELECT COUNT(uid) INTO @proc_h ...
- Hadoop有点难
从看<Hadoop权威指南>第一眼开始,我一直觉得Hadoop很难,很难.....看着这本书,我觉得好像是文言文,我是真的看不懂,我的一腔热血瞬间冷了下来!很幸运,但是也不幸运,我来到了一 ...