图⽂详解⿏标事件CSS：hover和JS：mouseover的区别
在⼯作中为了使页⾯更具有吸引⼒，前端开发⼈员经常会在页⾯中加上⿏标移⼊和移出的效果。⿏标移⼊移出的设置，⼀般有两种⽅法，⼀种是单纯⽤CSS中的hover伪类，另⼀种可以⽤JS 中的DOM事件，即onmouseover和onmouseout。接下来这篇⽂章就和⼤家讲讲CSS 伪类hover和JS⿏标事件mouseover的区别，希望可以帮助到你。
JavaScript中⿏标事件有：
onmouseover和onmouseout： 当⿏标移⼊和移出时触发事件
onmousedown和onmouseup： 当⿏标按钮被按下或者松开时触发事件
onclick和ondbclick ：当⿏标单击或者双击时触发事件
onmousemover ：当⿏标移动时触发事件
CSS：hover是css中的⼀种伪类选择器，指⿏标移⼊然后移出的过程，这个操作可以改变元素的样式，⽽且它相应的⼦类也被改变。但⽆法改变元素的内容。⽐如，⿏标经过实现弹出窗⼝的效果，它⽤的是onmousemove实现的，如果⽤hover则没办法做出这样的效果。
可能⽂字描述不是很好理解，接下⾥，举例个例⼦，看看hover和mouseover，mouseout之间有什么不同，结合图⽚看就⼀⽬了然了。先看看CSS:hover⽅法实现的效果吧
HTML部分：
<divclass="container">
<divclass="aa">内容1</div>
<divclass="bb">内容2</div>
</div>
CSS部分：
.container {
width: 200px;
border: 1pxsolid#000000;
css鼠标点击样式margin: 200pxauto;
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部分：
<divclass="container">
<divclass="aa"οnmοuseοver="over(this)"οnmοuseοut="out(this)">内容1</div>
<divclass="bb">内容2</div>
</div>
JavaScript部分：
functionover(obj){
obj.innerHTML = "⿏标移⼊";
obj.style.background = "pink";
}
functionout(obj){
obj.innerHTML = "移出了";
obj.style.background = "#ccc";
}
效果图：
左图是⿏标未移⼊的样式，和上⾯⼀样，中间图⽚是⿏标经过样式，上⾯⼀个div的背景颜⾊变成了粉⾊，⽽且内容变成了“⿏标移⼊”，右图是⿏标移出后的效果，div⾥⾯的内容变了。通过两个例⼦的对⽐，应该知道hover和mouseover，mouseout之间的区别了吧。
总结：CSS只能改变元素的样式，⽆法改变元素的内容，如果要改变内容应该使⽤JavaScript⿏标事件onmouseover和onmouseout。所以只是为了样式效果，⽤CSS的伪类hover，如果需要动态改变，则选择js的事件。在⼯作中具体有什么还要看情况，选择适合的⽅法。希望这个教程对你有⽤。
以上就是图⽂详解⿏标事件CSS:hover和JS:mouseover的区别的详细内容，更多请关注我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。