您的位置：首页技术文章
文章详情页

javascript - onmouseover闪烁问题 鼠标移动上去会不停的闪烁

浏览：168日期：2023-06-03 14:31:54

问题描述

onmouseover里面的innerHTML加两个p会闪烁，一个不会：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>*{ margin: 0; padding: 0;}#box { width: 250px; height: 350px; border: 3px solid darkgrey;}ul li{ float: left; margin: 20px 10px; background-color: goldenrod; list-style: none;}ol { margin-top: 70px;}ol li { height: 40px; border-bottom: 1px solid gainsboro;}ol li p{ display: inline-block; margin:0 15px;} </style> <script>window.onload = function () { var box = document.getElementById(’box’); var aOl = box.getElementsByTagName(’ol’); var arrIMG = [’1.png’,’2.png’,’3.png’,’4.png’,’5.png’,’6.png’]; function lis(){//获得所有livar olBox = null;var aOli=[];// 存放所有li元素节点for (var i=0;i<aOl.length;i++){//遍历ol olBox = aOl[i].getElementsByTagName(’li’); for(var j=0;j<olBox.length;j++){aOli.push(olBox[j]); }}return aOli } function liHover(li,imgs){// hover时的效果for(var i=0;i<li.length;i++){ li[i].index = i; li[i].onmouseover = function () {this.innerHTML = ’<p><img src=’+imgs[li.index]+’ alt=''></p>’ +’<p>’ +’<h4>标题</h4>’ +’<p>内容内容内容内容</p>’ +’</p>’; } li[i].onmouseout = function () {this.innerHTML = this.index+1; }} } var toLi = lis(); liHover(toLi,arrIMG);} </script></head><body><p id='box'> <ul><li><h3>每日</h3></li><li><h3>每周</h3></li><li><h3>每月</h3></li> </ul> <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li> </ol> <ol style='display: none'><li>111</li><li>222</li><li>3333</li><li>444</li><li>555</li><li>666</li> </ol> <ol style='display:none'><li>1aa</li><li>2aa</li><li>3aa</li><li>4aa</li><li>5aa</li><li>6aa</li> </ol></p></body></html>

问题解答

回答1：

mouseover 会在鼠标移动的时候不断触发，导致重写 li 里的 html 内容，改成 mouseenter 和 mouseleave 就可以了

例子可以看这个：https://jsfiddle.net/chenjsh3...

回答2：

试试改成onmouseenter和onmouseleave呢

标签： JavaScript
上一条：javascript - gulp编译sass出错下一条：javascript - router.push无效
相关文章：
1. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题2. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）3. java - mybatis怎么实现在数据库中有就修改,没有就添加4. MYSQL新建用户设置可以远程访问的问题5. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？6. angular.js - angularjs的自定义过滤器如何给文字加颜色？7. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！8. docker-compose中volumes的问题9. mysql - SQL操作时间的函数?10. docker api 开发的端口怎么获取？
排行榜
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
1. java - mybatis怎么实现在数据库中有就修改,没有就添加
2. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）
3. MYSQL新建用户设置可以远程访问的问题
4. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！
5. angular.js - angularjs的自定义过滤器如何给文字加颜色？
6. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？
7. docker api 开发的端口怎么获取？
8. docker-compose中volumes的问题
9. mysql - SQL操作时间的函数?
10. angular.js - angularjs 与requirejs集成
热门标签