CSS mouseover重复多次，不好用

最新推荐文章于 2024-07-26 10:19:04 发布
原创 最新推荐文章于 2024-07-26 10:19:04 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用mouseover和mouseout事件控制DIV显示隐藏的方法，并指出这种方法可能导致频繁触发显示与隐藏的问题。通过更换为mouseenter和mouseleave事件，可以有效地解决这一问题。


<div style="width:200px;margin-left:-200px;" @mouseover="doShow" @mouseout="doHide">
    <img src="../img/control" style="width:230px"/>
<div id="queryR">
    .......
</div>
</div>

我用mouseover和mouseout控制一个div的显示与隐藏，img显示出一小部分，鼠标移上去显示整个DIV，离开隐藏整个DIV。

效果不好，会显示隐藏好几次。太灵活啦偷笑

换成 mouseenter 和 mouseleave 就可以啦


CSS实现onMouseOver、onMouseOut效果和层套菜单
javaqun的博客
10-19 2525
​在IE中onmouseover, onmouseout对这两个样式的支持不完全。默认只支持 标签的。而实际上 WEB 标准里面， 应该对所有元素都支持。 如果使用 Mozilla 或者 Opera, 那么可以看到不需要这个 htc 都可以正常运行的。 因为 htc 是 IE 特有的，别的浏览器不能理解，会忽略掉，不影响结果的显示。 以下这段 htc 是一个老外写的针对 IE 的 hov
html+css+js基础
05-25 962
var obj={} //空对象var obj={属性名：值方法名:function(形参){}方法名:(形参)=>{}1.访问对象的属性|方法 对象名.属性名|对象名.方法名(实参)2.修改对象的属性 对象名.属性名=新值3.新增对象属性 对象名.新增属性名=值4.新增对象方法 对象名.方法名=function(形参){//操作语句。
html mouseover css,css html mouseover hover
weixin_29624785的博客
06-23 145
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", t...
以css 做出mouseover 即放大圖之效果
08-04
利用切割好的圖片組合，及CSS標箋，在不使用javascript條件下完成mouseover放大區域圖片的效果
js mouseover/mouseout不停地循环
学而不思则罔 思而不学则殆
08-28 1532
情形： 我要在鼠标经过tbody中的tr时，会产生事件。 这个事件是给tr中的td写内容，内容是带标签的，如：<p>abc</p>。结果发现，当鼠标经过abc的时候会不停地产生事件。 解决方案： 用hover：$("#tab tr").hover(function(){}，function(){});
html mouseover css,图文详解鼠标事件CSS:hover和JS:mouseover的区别
weixin_39628551的博客
06-23 649
在工作中为了使页面更具有吸引力，前端开发人员经常会在页面中加上鼠标移入和移出的效果。鼠标移入移出的设置，一般有两种方法，一种是单纯用CSS中的hover伪类，另一种可以用JS 中的DOM事件，即onmouseover和onmouseout。接下来这篇文章就和大家讲讲CSS伪类hover和JS鼠标事件mouseover的区别，希望可以帮助到你。JS可以对 HTML 事件作出反应，mouse属于jav...
vue2怎么让鼠标触碰元素让重复执行的css帧动画只执行一次
04-24
然后，在CSS中使用animation-fill-mode属性将动画停止在其最终状态，这样即使元素多次渲染，动画也只会执行一次。例如： ``` <div v-once @mouseover="startAnimation">Hover me! div { animation-name: my-...
CSS Brush - Live CSS编辑器。「CSS Brush - Live CSS editor」-crx插件
03-09
它提供了更多CSS属性，而不仅仅是文本输入。 }＃3上下文相关菜单{您在键入时就会了解匹配的属性。 因此，您不必键入所有字符，只需输入b，o和enter等几个字符即可输入“ border”。 或者可能只有几个上下箭头笔触...
实现多色文字上下滚动的js+css3动画
如果需要响应用户操作来启动或停止动画，可以通过监听事件（如`click`、`mouseover`等）来调用相应的JavaScript函数，该函数可以修改CSS中的`animation-play-state`属性从`running`变为`paused`，或反之。...
还在用定时器吗？借助 CSS 来监听事件
不定时分享最优质的网络技术与教程，满满的干货。
12-25 273
以上就是你可能不需要定时器的几个替代方案，相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势，下面总结一下:hover配合transition延时、监听可以实现鼠标经过延时触发效果:active配合transition延时、监听可以实现长按触发效果CSS 动画设置infinite后配合监听可以实现周期性触发效果可以直接通过:hover来控制台动画的暂停和播放当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active。
鼠标悬浮效果：css:hover；js:mouseover,mouseout
qq_45327886的博客
04-15 6920
鼠标悬浮效果js和css实现方式
【css】vue 鼠标移入移出 更改图片 @mouseover @mouseout @mouseenter @mouseleave 区别
AAAXiaoApple的博客
09-21 2029
【代码】【css】vue 鼠标移入移出 更改图片 @mouseover @mouseout @mouseenter @mouseleave 区别。
图文详解鼠标事件CSS:hover和JS:mouseover的区别
lin123_00的博客
05-18 2343
在工作中为了使页面更具有吸引力，前端开发人员经常会在页面中加上鼠标移入和移出的效果。鼠标移入移出的设置，一般有两种方法，一种是单纯用CSS中的hover伪类，另一种可以用JS 中的DOM事件，即onmouseover和onmouseout。接下来这篇文章就和大家讲讲CSS伪类hover和JS鼠标事件mouseover的区别，希望可以帮助到你。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）.
[css] 鼠标事件css的:hover和js的mouseover有什么区别？
歌谣的博客
01-29 619
[css] 鼠标事件css的:hover和js的mouseover有什么区别？ JavaScript中鼠标事件有：   onmouseover和onmouseout： 当鼠标移入和移出时触发事件   onmousedown和onmouseup： 当鼠标按钮被按下或者松开时触发事件   onclick和ondbclick ：当鼠标单击或者双击时触发事件   onmousemover ：当鼠标移动时触发事件   CSS：hover是css中的一种伪类选择器，指鼠标移入然后移出的过程，这个操作可以改变
mouseenter、mouseleave 和 mouseover事件关系和使用
最新发布
qq_54855933的博客
07-26 1517
鼠标经过动画是前端项目一个非常常见且重要的需求。我们常用的实现方法有两种，第一是使用css中的hover属性，第二则是利用JavaScript 提供的处理事件的函数。本文主要展开解释的是 mouseenter、mouseleave 和 mouseover 这三个JavaScript 中用于处理鼠标事件的函数，它们之间有着明显的区别和特定的使用场景。这些事件通常与 DOM 元素相关联，用于在用户的鼠标指针与元素交互时触发特定的行为。
mouseover事件mouseenter事件mouseleave事件和mouseout事件之间的区别与联系
前端小白
02-15 921
文章目录两者定义两两区别例子小结 两者定义 mouseover：鼠标覆盖 mouseenter：鼠标进入 mouseleave：鼠标移出 mouseout：鼠标移出 两两区别 既会捕获也会冒泡 mouseover鼠标指针穿过被选元素或是其子元素都会触发 mouseout鼠标指针移出被选元素或是其子元素都会触发 只会捕获不会冒泡 mouseenter只有鼠标指针穿过被选元素才会触发 mouseleave只有鼠标指针移出被选元素才会触发 例子 我们同时对大div加上这四个属性，然后从左向右移动鼠标 <
理解mouseover,mouseout,mouseenter,mouseleave
weixin_33912453的博客
05-13 224
mouseover定义和用法 当鼠标指针位于元素上方时，会发生 mouseover 事件。 该事件大多数时候会与 mouseout 事件一起使用。 mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。 注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 &l...
鼠标经过离开事件
qq_43267265的博客
12-18 1570
$(’#xxx tr’).mouseover(function(){ //鼠标经过显示红色 $(this).css(‘color’,‘red’); }) $(’#xxx tr’).mouseout(function(){//离开没颜色 $(this).css(‘color’,’’); })
CSS的onmouseover 和onmouseout事件
weixin_30763397的博客
04-26 354
td { text-align: center; line-height: 30px; cursor: hand; color:#027CD1; /*设置onmouseover事件*/ onmouseover: expression(onmouseover=function (){ this.style.borderColor=''; this.style.ba...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值