jQuery的鼠标移入与移出事件

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

时间: 2024-12-13 23:00:32

jQuery的鼠标移入与移出事件的相关文章

jq鼠标移入和移出事件

前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论我怎么调试只有mouseover方法可以,mouseout方法失效. 于是就google,百度寻找解决答案,可是找了好久都没找到合适的答案.只好问问同事了,同事看了我的代码后也觉得没有问题,但是怎么测都失效. 往往在一条路上遇到问题后,通过各种方式都解决不了时,我们就要调整思路转换道路. 同事跟我说

【2017-3-30】DOM获取元素 点击、鼠标移入、移出事件 样式控制

1.获取标记对象 + document.getElementById('id'):                        - 获取一个对象 + document.getElementsByClassName('class');      - 获取的是一个数组 + document.getElementsByTagName('标记');          - 获取的也是一个数组 + document.getElementsByName('name');             - 获取的也

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;

jquery实现星级评分,鼠标移入和移出改变评分

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>demo3.html</title> 5 6 <meta name="keywords" content="keyword1,keyword2,keyword3"> 7 <meta name="description" content="this is my page&q

jquery——解决鼠标移入移出导致盒子不停移动的bug

使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src

jquery实现鼠标移入移除背景图片切换

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

匿名函数和鼠标移入移除事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改变边框</title> <style> .def { border: 1px solid #ccc; margin-right: 120px; } .hover { border: 1px solid red; margin-right: 12

第十五篇 JS 移入移出事件 模拟一个二级菜单

JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

表格隔行变色以及鼠标移入高亮显示

功能描述: 实现表格奇数行和偶数行背景颜色不一样,以及鼠标移入时,移入行高亮显示. 实现效果: 编码思路: 遍历表格行,如行号为为奇数,设置背景颜色为灰色,行号为偶数,设置背景颜色为空. 设置表格每行的鼠标移入和移出事件. 鼠标移入时,保存当前背景颜色并设置背景颜色为绿色. 鼠标移出时,还原保存的背景颜色. 代码示例: