jQuery 中的hover 和 mouseover 有什么区别

发布网友 发布时间：2022-04-19 20:11

我来回答

共4个回答

懂视网 时间：2022-04-28 16:28

在工作中为了使页面更具有吸引力，前端开发人员经常会在页面中加上鼠标移入和移出的效果。鼠标移入移出的设置，一般有两种方法，一种是单纯用CSS中的hover伪类，另一种可以用JS 中的DOM事件，即onmouseover和onmouseout。接下来这篇文章就和大家讲讲CSS伪类hover和JS鼠标事件mouseover的区别，希望可以帮助到你。

JS可以对 HTML 事件作出反应，mouse属于javascript里的，他可以触发js命令，当元素绑定一个事件，事件发生的时候，可以执行一段javascript代码。

JavaScript中鼠标事件有：
onmouseover和onmouseout： 当鼠标移入和移出时触发事件
onmousedown和onmouseup： 当鼠标按钮被按下或者松开时触发事件
onclick和ondbclick ：当鼠标单击或者双击时触发事件
onmousemover ：当鼠标移动时触发事件

CSS：hover是css中的一种伪类选择器，指鼠标移入然后移出的过程，这个操作可以改变元素的样式，而且它相应的子类也被改变。但无法改变元素的内容。比如，鼠标经过实现弹出窗口的效果，它用的是onmousemove实现的，如果用hover则没办法做出这样的效果。

可能文字描述不是很好理解，接下里，举例个例子，看看hover和mouseover，mouseout之间有什么不同，结合图片看就一目了然了。

先看看CSS:hover方法实现的效果吧

HTML部分：

<div class="container">
 <div class="aa">内容1</div>
 <div class="bb">内容2</div>
</div>

CSS部分：

.container {
  width: 200px;
  border: 1px solid #000000;
  margin: 200px auto;
  line-height: 100px;
  text-align: center;
  }
.aa,.bb {
  height: 100px;
  margin: 1px;
  background: #ccc;
  }
.aa:hover{background: pink;}

效果图：

一个大盒子中含有两个小的div，我想让鼠标经过上面一个div时，背景颜色变成粉色。左图是鼠标未移入的效果，右图是鼠标经过时的效果。从图片中可以看出，CSS：hover确实可以实现这个效果。

那接下来，我们看看JavaScript中的onmouseover和onmouseout又是怎么实现的。CSS部分代码一样，只是HTML加了事件，用到了JavaScript。

HTML部分：

<div class="container">
 <div class="aa" onmouseover="over(this)" onmouseout="out(this)">内容1</div>
 <div class="bb">内容2</div>
</div>

JavaScript部分：

function over(obj){ 
  obj.innerHTML = "鼠标移入"; 
  obj.style.background = "pink";
  }
  function out(obj){
  obj.innerHTML = "移出了";
  obj.style.background = "#ccc"; 
  }

效果图：

左图是鼠标未移入的样式，和上面一样，中间图片是鼠标经过样式，上面一个div的背景颜色变成了粉色，而且内容变成了“鼠标移入”，右图是鼠标移出后的效果，div里面的内容变了。通过两个例子的对比，应该知道hover和mouseover，mouseout之间的区别了吧。

总结：CSS只能改变元素的样式，无法改变元素的内容，如果要改变内容应该使用JavaScript鼠标事件onmouseover和onmouseout。所以只是为了样式效果，用CSS的伪类hover，如果需要动态改变，则选择js的事件。在工作中具体有什么还要看情况，选择适合的方法。希望这个教程对你有用。

热心网友 时间：2022-04-28 13:36

这2个是有区别的。
hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。
可参考mouseover和mouseenter的区别：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover
而mousemove如你所说只要鼠标移动，哪怕只有1像素就会触发。因为用户在浏览网页的过程中，鼠标是会不停移动的，所以一旦绑定这个事件，网页就会不停的执行mousemove所绑定的响应函数，消耗系统资源。这里的系统资源是指客户端的。。

热心网友 时间：2022-04-28 14:54

hover接受两个参数，一个执行mouseover的功能，一个执行mouseout的功能

热心网友 时间：2022-04-28 16:29

hover 可以带两个函数，一个移入，一个移出