开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js鼠标移入移出

在JavaScript中，鼠标移入和移出事件通常是通过mouseenter和mouseleave事件来实现的。这两个事件与mouseover和mouseout事件有所不同，主要在于mouseenter和mouseleave不会在子元素上触发，而mouseover和mouseout会在子元素上触发。

基础概念

mouseenter: 当鼠标指针进入某个元素时触发。
mouseleave: 当鼠标指针离开某个元素时触发。

优势

不会在子元素上触发，避免了不必要的事件处理。
更适合用于创建悬停效果，如显示工具提示或改变背景颜色。

应用场景

显示或隐藏元素的额外信息（如工具提示）。
改变元素的样式，如背景颜色、字体颜色等。
触发某些动画效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Enter and Leave Example</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 200px;
    transition: background-color 0.3s;
  }
</style>
</head>
<body>

<div class="box" id="myBox">Hover me!</div>

<script>
  const box = document.getElementById('myBox');

  box.addEventListener('mouseenter', function() {
    box.style.backgroundColor = 'red';
  });

  box.addEventListener('mouseleave', function() {
    box.style.backgroundColor = 'blue';
  });
</script>

</body>
</html>

常见问题及解决方法

事件在子元素上触发：
- 如果你发现mouseenter或mouseleave在子元素上触发，可能是因为你在父元素和子元素上都绑定了这些事件。确保只在需要的元素上绑定事件。

事件不触发：
- 确保元素在DOM中已经加载完毕后再绑定事件。可以在window.onload事件中绑定，或者将脚本放在</body>标签之前。
性能问题：
- 如果页面中有大量的元素需要绑定这些事件，可能会影响性能。可以考虑使用事件委托，将事件绑定到父元素上，通过事件冒泡来处理子元素的事件。

总结

mouseenter和mouseleave事件在处理鼠标悬停效果时非常有用，它们的优势在于不会在子元素上触发，避免了不必要的事件处理。通过合理使用这些事件，可以创建出更加流畅和用户友好的交互效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularJS实现鼠标移入显示,鼠标移出隐藏

很简单： Mouse ove...

3.3K3 0

JS示例01-鼠标移入移出事件

一、知识要点 1、匿名函数 2、鼠标事件 3、document.getElementById() 4、window.onload 5、行间事件提取二、源码参考 <!

5.6K2 0

Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化

在按钮上：onmousemove和onmouseover都不区分鼠标按钮在动作上：onmouseover是在鼠标刚移入区域的时候触发，onmousemove是除了鼠标移入区域时触发外，鼠标在区域内移动同样也会触发事件...两者区别：当鼠标移过当前对象区域时就产生了onmouseover事件，所以onmouseover事件有个移入移出的过程,当鼠标在当前对象区域上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的...onmouseout事件则是在鼠标移出对象区域时触发。...rel="stylesheet" type="text/css" href="styles.css"> --> js... 浙大生物4000 Js

1.7K4 0

vue鼠标移入移出显示和隐藏_labview树形控件卡

实现效果与原理我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show

2.7K1 0

杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）

今天给大家分享一个简单的JavaScript事件案例：该事件属于悬浮事件改代码逻辑非常简单，主要是当鼠标移动到按钮上显示一个盒子，移开之后盒子隐藏 JavaScript事件中 onmouseover...代表的是鼠标指针移动到指定的对象上时发生某个动作； onmouseout 代表的是鼠标指针移出该指定的对象上时发生某个动作； xxxx.style 代表一个单独的样式声明 display..." xml:lang="en"> 鼠标移入移出显示或隐藏的悬浮事件...background:#ccc; border:1px solid #000; display:none; } 移动鼠标到按钮会有盒子显示或隐藏

1.6K3 0

dom啦14 移入移出菜单

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ ...

5362 0

dom啦13 移入移出事件

body> let qq= document.querySelector("div"); //移入事件...qq.onmouseenter=function() { console.log("移入事件"); } //移除事件 qq.onmouseleave...=function() { console.log("移出事件"); } qq.onmousemove=function() { console.log

7112 0

jQuery第三十篇移入移出事件

/jquery-1.10.1.min.js"> /* mouseover/mouseout事件..., 子元素被移入移出也会触发父元素的事件 */ $(function() { /* $(".father").mouseover(...function () { console.log("father被移入了"); }); $(".father").mouseout...(function () { console.log("father被移出了"); }); */.../* mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件推荐大家使用 */

6581 0

jquery 鼠标移入文字提示

} </style> <script type="text/javascript"> //<![CDATA[

5.6K0 0

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

网站底部经常会有微信图标，鼠标点击或者划入显示二维码的效果。怎么来实现它呢？我们首先写一个简单的页面，实现鼠标移入移除或者点击显示隐藏效果。... jQuery事件-div的显示隐藏及鼠标的移入移出...： $(function (){ //鼠标的移入移出 $(".header").mouseover(function (){ $(".content"...).show(); }).mouseout(function (){ $(".content").hide(); }); 鼠标移入移除效果（... jQuery事件-微信的显示隐藏及鼠标的移入移出

3.8K0 0

CSS 实现卡片以及鼠标移入特效

CSS 实现卡片以及鼠标移入特效 0、效果预览默认鼠标移入后在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。...border-radius: 10px; transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s; // 鼠标悬停效果...180px; border-radius: 10px; } } } } 通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效

1071 0

vue中通过移入移出来改变元素样式的方法

当鼠标移入当行的群成员数量的时候，数字变蓝色，移出恢复默认颜色 image.png 方法一： 1.声明一个变量比如说 current：1，当 current = 1 时 active 样式不显示。...'active' : '' " 3.给元素绑定移入移出事件 4.移入时需要添加 active的样式，在移入事件中修改 current = 0 5.移出时需要去除active的样式，在移出事件中修改 current...不然移入事件时会选中当列所有的元素，而不是鼠标点中的那个元素。...方法二： 1.元素添加一个类名，绑定移入移出事件，并传递 $event 这个参数 2.添加一个active 的样式 3.在移入移出事件中，通过一下两行代码来添加或者删除 active 样式 $event.currentTarget.className

2.2K0 0

jquery 鼠标移入，显示预览大图

} </style> <script type="text/javascript"> //<![CDATA[

3.6K0 0

JavaScript实例---表格隔行变色以及移入鼠标高亮

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>index</title> <style...

1.2K7 0

化学家现在可以将单个原子从分子核心中移入和移出

半个世纪前，化学家马克·莱文是一名博士后，正在寻找一个能够改变他领域的富有远见的项目。他在一组来自制药行业科学家的发布的心愿清单中找到了灵感，这些科学家希望找到...

2692 0

Web前端基础（08）

###事件模拟模拟触发某个元素的某个事件格式: 元素对象.trigger(“事件名称”); $(“input”).trigger(“click”); ###鼠标移入移出事件合并 hover...将鼠标移入和移出两个事件合并到一起 //给元素添加鼠标移入移出合并事件 (“div”).hover(function(){ //鼠标移入时执行 (this).css(“color”,“red”); }...,function(){ //鼠标移出时执行隐藏元素对象.hide(时间,方法); 显示元素对象.show(时间,方法); 淡出元素对象.fadeOut(时间,方法); 淡入元素对象.fadeIn..."> //给元素添加鼠标移入移出合并事件 $("div").hover(function(){ //鼠标移入时执行 $(this).css("color","red");...},function(){ //鼠标移出时执行 $(this).css("color","green"); }); setTimeout(function(){

1.2K1 0

“鼠标移入显示悬浮框”特效，也可以“高大上”

在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向（录制gif图像时不能够录制鼠标，因此无法展示鼠标位置）。...一种方法是为每个块定位四个悬浮块（上下左右），当满足鼠标移入的条件时，让相应的悬浮块滑入；第二种方法是只为每个块定位一个悬浮框，每次鼠标移入时，先“初始化”悬浮块的位置，之后再控制悬浮框滑入。...2.2.功能实现逻辑分析首先通过JS，获取鼠标在块当中的坐标；此后，根据“鼠标所处的位置”判断鼠标移入方向“；最后，再根据鼠标移入方向来执行相应的功能。...3、功能实现 3.1.获取鼠标块内坐标想要得到鼠标在块内位置，需要使用如下JS中获取位置的方法： jQuery方法中的“$(元素).offset().top”用于获取元素距页面顶部的距离；“$(元素...).offset().left”用于获取元素距页面左边的距离；原生JS中，通过事件对象（event）的pageX可以获取鼠标相对于页面的X轴位置；通过事件对象（event）的pageY可以获取鼠标相对于页面的

5.3K9 0

前端特效开发 | 图片翻转的制作

如上效果，当用户将鼠标移入到每一张图片上，当前的图片会有一个翻转消失的效果，同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时，原有的图片会翻转出现，面板信息会翻转消失。...实现的原理分析 2.1 结构与样式分析由于需要的功能是随着鼠标移入图片与信息都需要翻转，所以在同一个位置要存在两个标签并发生相应的变化，可以考虑使用定位来实现。...2.2 基本功能逻辑首先使用JS实现动态添加翻转后展示的信息面板；然后借助jQuery的hover方法，实现鼠标移入移出的功能；最后针对不同的翻转变化，让图片与信息面板发生相反的效果展示。...案例实现 3.1 添加面板信息在鼠标移入相应的图片时，需要让图片可以翻转消失，同时有一个信息面板可以翻转出现。...；第二个函数表示的是鼠标移出发生的事情。

3.9K7 1

硬核解析，巧用案例学习jQuery框架三种事件绑定方式

一、 jquery标准的绑定方式 Jquery框架的标准绑定的语法是： jq对象.事件方法(回调函数)；如： Jquery对象.cilck();点击事件 Jquery对象.mouseover();鼠标移入时触发...Jquery对象.mouseout();鼠标移出时触发表单对象.submit();//让表单提交*** 在这里需要注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。...如下面的实例：鼠标移入时触发弹窗，移出时再触发弹窗事件。 <!...~"); });*/ // 利用jQuery对象获取鼠标移入和移出响应事件 // 鼠标移入 $("#name...// 鼠标移出 $("#name").mouseout(function () { alert("鼠标移除了~"); })

2K1 0

【JQuery】JQuery入门——知识点讲解(三)

元素 value 属性操作操作元素的 value 属性值，目前我们可以使用如下方式操作： JS 方式：元素对象 .value= 值 ; jQuery 方式： JQ 对象 .prop...遍历数组-each 在 JS 中，我们使用普通 FOR 循环即可遍历数组。...常见 jQuery 事件总结：比 JS 事件少了 on 6. jQuery 事件定义方式我们以鼠标移入、移出和点击事件为例讲解：鼠标移入： mouseover 鼠标移出： mouseout...点击事件： click 格式： JQ 对象 .mouseover(fn); 其中： fn 为当鼠标移入时会调用的函数（回调函数）回调函数格式： function(...){ //this 就是当前操作的 JS 对象 } 准备代码：

7833 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭