jQuery的鼠标移入与移出事件

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

//1.监听li的移入事件$("li").mouseenter(function () {$(this).addClass("current");});

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

// 2.监听li的移出事件$("li").mouseleave(function () {$(this).removeClass("current");});

上面的js代码会在后面的进行展示

电影排行榜页面渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>34-电影排行榜上</title><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: 50px auto;border: 1px solid #000;}.box>h1{font-size: 20px;line-height: 35px;color: deeppink;padding-left: 10px;border-bottom: 1px dashed #ccc;}ul>li{list-style: none;padding: 5px 10px;border: 1px dashed #ccc;}ul>li:nth-child(-n+3) span{background: deeppink;}ul>li>span{display: inline-block;width: 20px;height: 20px;background: #ccc;text-align: center;line-height: 20px;margin-right: 10px;}.content{overflow: hidden;margin-top: 5px;}.content>img{width: 80px;height: 120px;float: left;}.content>p{width: 180px;height: 120px;float: right;font-size: 12px;line-height: 20px;}</style>
</head>
<body>
<div class="box"><h1>电影排行榜</h1><ul><li><span>1</span>战狼2<div class="content"><img src="data:images/zl.jpg" alt=""><p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p></div></li><li><span>2</span>电影名称</li><li><span>3</span>电影名称</li><li><span>4</span>电影名称</li></ul>
</div>
</body>
</html>

动态实现显示电影信息

demo

 $(function () {// 编写jQuery相关代码/*// 1.监听li的移入事件$("li").mouseenter(function () {$(this).addClass("current");});// 2.监听li的移出事件$("li").mouseleave(function () {$(this).removeClass("current");});*/$("li").hover(function () {$(this).addClass("current");}, function () {$(this).removeClass("current");});});

最终效果

当鼠标移入li:

移出鼠标就会进行动态的关闭li 里面显示的信息。

Mr.J-- jQuery学习笔记(十二)--移入移出事件电影排行榜小demo相关推荐

吴恩达《机器学习》学习笔记十二——机器学习系统
吴恩达<机器学习>学习笔记十二--机器学习系统一.设计机器学习系统的思想 1.快速实现+绘制学习曲线--寻找重点优化的方向 2.误差分析 3.数值估计二.偏斜类问题(类别不均衡) 三. ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
ROS学习笔记十二：使用roswtf
ROS学习笔记十二:使用roswtf 在使用ROS过程中,roswtf工具可以为我们提供ROS系统是否正常工作的检查作用. 注意:在进行下列操作之前,请确保roscore没有运行. 检查ROS是否安装 ...
Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
Polyworks脚本开发学习笔记(十二)-输出和读取文本文件
Polyworks脚本开发学习笔记(十二)-输出和读取文本文件 Polyworks作为一个测量工具,将测量的数据方便的导出到文本文件则是一项必须的功能.在DATA_FILE这个命令下提供了很多子命令用 ...
OpenCV学习笔记(十二)——图像分割与提取
在图像处理的过程中,经常需要从图像中将前景对象作为目标图像分割或者提取出来.例如,在视频监控中,观测到的是固定背景下的视频内容,而我们对背景本身并无兴趣,感兴趣的是背景中出现的车辆.行人或者其他对象. ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
软件调试学习笔记（二）—— 调试事件的采集
软件调试学习笔记(二)-- 调试事件的采集要点回顾调试事件的种类调试事件采集函数例:分析PspUserThreadStartup 例:分析PspExitThread 总结要点回顾调试器与被 ...

Mr.J-- jQuery学习笔记(十二)--移入移出事件电影排行榜小demo

jQuery的鼠标移入与移出事件

mouseover与mouseenter

mouseout与mouseleave

电影排行榜页面渲染

动态实现显示电影信息

demo

最终效果

Mr.J-- jQuery学习笔记(十二)--移入移出事件电影排行榜小demo相关推荐

最新文章

热门文章