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

最新推荐文章于 2021-07-18 10:09:55 发布

End_less__

最新推荐文章于 2021-07-18 10:09:55 发布

阅读量282

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/92063344

版权

这篇博客介绍了jQuery中的mouseover、mouseenter、mouseout和mouseleave事件，详细解释了它们的区别，并通过实例展示了如何在电影排行榜页面上应用这些事件来动态显示和隐藏电影信息。

摘要由CSDN通过智能技术生成

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>
&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

End_less__

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Mr.J-- jQuery学习笔记(十六)--展开和收起动画&&折叠菜单的实现

Lawless

06-18

1253

之前写过动画的隐藏与显示：Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告：Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告与动画隐藏与显示对应的，展开和收起也有三个主要方法: slideDown() 定义和用法 slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。语法 $(sele...

Mr.J-- jQuery学习笔记(十七)--动画淡入淡出&&弹窗广告

Lawless

06-20

301

之前写过动画的隐藏与显示：Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告：Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告展开和收起动画&&折叠菜单的实现:Mr.J-- jQuery学习笔记(十六)--展开和收起动画&&折叠菜单的实现动画的淡入淡出下面实例要用的页面元素： ...

参与评论您还未登录，请先登录后发表或查看评论

jquery学习一

qq_39860799的博客

08-13

152

Jquery学习之选项卡：实现效果：当鼠标触碰到不同的选项卡的时候。展示不同的图片基本页面书写： <body> <div > <ul > <li>one</li> <li>two</li>

CSS高级选择器以及使用案例——电影排行榜

qq_42000660的博客

07-18

781

一、CSS高级选择器的几种写法 1、xxx:first-child 选择第一个xxx元素 2、xxx:nth-of-type(even) 选择序号同类型为偶数的xxx元素 3、xxx:nth-of-type(odd) 选择序号同类型为奇数的xxx元素 4、xxx:nth-of-type(index) 选择（同类型）序号为index的xxx元素 5、xxx:nth-child(n) 选择序号（自然排序）为n的xxx元素二、实战案例 1、效果： 2、案例分析分析效果图可知：第.

jquery/css电影排行榜

qq_35878240的博客

08-06

1303

今天心血来潮，随便写点干货，致敬大牛，鼓励和我一样奋斗在路上的朋友。写了一个电影排行榜，适合初学者一起学习，网上很多类似的吗，我没看，直接仿制了一个。话不多说，上图：下面直接贴上源码，因为比较简单，就不多做解释。如果有问题，直接留言，喜欢我就关注我吧。 <!DOCTYPE html> <html> <head> <meta http-equiv...

jquery实现鼠标移上去某元素显示隐藏的内容，移除继续隐藏

weixin_44006570的博客

06-03

4403

假设鼠标滑过A元素（id =”a”）， B元素(id=”b”) 显示鼠标在A、B元素区域时 B元素一直显示鼠标离开A、B元素区域 B元素隐藏 $(document).ready(function(){ $('#a').hover(function() { $("#b").css('display', 'block'); },...

Mr.J-- jQuery学习笔记(十)--trigger方法详解

Lawless

06-12

370

看本篇文章之前建议先看这篇：Mr.J-- jQuery学习笔记(九)--事件绑定&移除&冒泡也可以看我的专栏：Mr.J--jQuery学习定义和用法 trigger() 方法触发被选元素的指定事件类型。触发事件规定被选元素要触发的事件。语法 $(selector).trigger(event,[param1,param2,...]) 参数 ...

Mr.J-- jQuery学习笔记(二十二)--入口函数

Lawless

06-23

405

入口函数的作用：等待页面加载完毕，有一个独立的作用域。原生JS 和 jQuery 入口函数区别：（1）JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。（2）JQuery入口函数是在所有标签加载完之后，就会去执行。 jQuery基本结构 jQuery是一个闭包之前有写过闭包：Mr.J--JS学习（闭包及IIFE） Mr....

jQuery事件-div的显示隐藏及鼠标的移入移出

weixin_30668887的博客

01-18

628

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse...

js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

acugck6042的博客

02-07

1731

jQuery鼠标移入移出，获取下标

zh__quan的博客

08-01

1108

jQuery鼠标移入，移出事件 mouseenter 鼠标指针穿过被选元素或其子元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseout 鼠标指针离开被选元素或其子元素时注意 hover包含 mouseenter mous...

动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

热门推荐

从零出发

03-22

1万+

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。2、具体代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

Mr.J-- jQuery学习笔记(一)--初入jQuery

Lawless

06-03

1077

jQuery是什么 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、...

Mr.J-- jQuery学习笔记(二十)--节点操作方法

Lawless

06-21

546

Table of Contents 添加节点内部插入外部插入删除节点 remove([expr]) empty() detach([expr]) 替换节点 replaceWith(content|fn) replaceAll(selector) 复制节点 clone([Even[,deepEven]]) 浅复制深复制浅复制和深复制的区别 ...

Mr.J-- jQuery学习笔记(二十五)--监听DOM加载

Lawless

06-28

544

页面元素 <body> <div></div> <div></div> <div></div> <div></div> </body> onload和DOMContentLoaded对于DOM事件加载的区别 onload事件会等到DOM元素加载完毕, 并且还会等到...

Mr.J-- jQuery学习笔记(二十七)--DOM操作方法(删除&获取文本)

Lawless

06-29

382

清除 <body> <button>调用remove</button> <div> 我是div <p>我是段落</p> </div> <div class="box"> 我是div <p>我是段落</p> </div> <p ...

三菱MR-J4-B伺服驱动配置全攻略

"本文主要介绍了三菱MR-J4-B系列伺服驱动的使用方法，包括接线、参数配置和程序调用，以及与FX5-80/40SSC运动控制模块的配合。" 三菱MR-J4-B系列伺服驱动是光纤总线型驱动，其特点是使用简便，通常与三菱的FX5-80/...