个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当鼠标指针进入链接时，onmouseenter 调用函数起作用，但是当鼠标指针离开链接时，并且离开的速度非常快，onmouseleave 没有完全执行该函数，否则如果缓慢离开，它应该执行
我已经尝试过 onmouseover 和 onmouseout，功能完全执行，但不断闪烁
function menuSlideOn(element) {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.height = '24px';
document.getElementById(element).style.margin = '0px 6px 0px 0px';
setTimeout(function delay() {
document.getElementById(element).style.width = '120px';
document.getElementById(element).style.transform = 'skew(-30deg)';
},
120);
}
function menuSlideOf(element) {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.width = '6px'
setTimeout(function delay() {
document.getElementById(element).style.height = '10px';
document.getElementById(element).style.margin = '5px 6px 0px 0px';
document.getElementById(element).style.transform = 'skew(0deg)';
},
120);
}ul {
list-style-type: none;
margin: 10px;
}
li {
margin: 10px;
padding: 10px;
}
ul a {
color: #333;
text-decoration: none;
text-indent: 20px;
font-weight: bold;
position: fixed;
}
.bullet {
width: 6px;
height: 10px;
background: gray;
float: left;
margin-top: 5px;
position: absolute;
}<ul>
<li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
<div id="d1" class="bullet"> </div>
<a href="">HTML</a>
</li>
<li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
<div id="d2" class="bullet"> </div>
<a href="">CSS</a>
</li>
<li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
<div id="d3" class="bullet"> </div>
<a href="">JavaScript</a>
</li>
<li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
<div id="d4" class="bullet"> </div>
<a href="">Java</a>
</li>
</ul>我希望代码应该在悬停链接后将 div 返回到初始状态，而不管鼠标指针的移动速度
实际结果取决于鼠标指针离开链接的速度
最佳答案
另一种解决方案是，如果将所有代码都添加到 setTimeout() 中，则不会出现此问题；
function menuSlideOn(element) {
setTimeout(function delay() {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.height = '24px';
document.getElementById(element).style.margin = '0px 6px 0px 0px';
document.getElementById(element).style.width = '120px';
document.getElementById(element).style.transform = 'skew(-30deg)';
},
150);
}
function menuSlideOf(element) {
setTimeout(function delay() {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.width = '6px'
document.getElementById(element).style.height = '10px';
document.getElementById(element).style.margin = '5px 6px 0px 0px';
document.getElementById(element).style.transform = 'skew(0deg)';
},
150);
}ul {
list-style-type: none;
margin: 10px;
}
li {
margin: 10px;
padding: 10px;
}
ul a {
color: #333;
text-decoration: none;
text-indent: 20px;
font-weight: bold;
position: fixed;
}
.bullet {
width: 6px;
height: 10px;
background: gray;
float: left;
margin-top: 5px;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="mouse_out.js"></script>
<link rel="stylesheet" href="mouse_out.css">
</head>
<body>
<ul>
<li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
<div id="d1" class="bullet"> </div>
<a href="">HTML</a>
</li>
<li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
<div id="d2" class="bullet"> </div>
<a href="">CSS</a>
</li>
<li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
<div id="d3" class="bullet"> </div>
<a href="">JavaScript</a>
</li>
<li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
<div id="d4" class="bullet"> </div>
<a href="">Java</a>
</li>
</ul>
</body>
</html>关于javascript - 当指针离开和转到下一个链接太快时，onmouseleave 中调用的函数的转换不会完全执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55845233/
25
4
0
我之前已经成功地完成了此操作，但现在在多次运行程序后，失败的原因是屏幕截图太快。当 jframe 淡入时，它不会获取正确的图像。我该如何解决这个问题？ 编辑:所以基本上我试图捕获 JFrame 内 J
我正在 Canvas 中创建简单的动画。我使用 requestanimationframe 来控制动画。有3圈。但我只能看到 3 个圆圈，而且动画太快了。我的问题是如何减慢动画速度以及如何显示每一帧。
我有一个 ASP.NET-MVC 应用程序: 打开一个数据库事务 更新购物车状态和其他内容 通过 HttpRequest 将此购物车提交给另一个网络服务器 在数据库中注册传输及其代码状态 发送一封确认
我对大文件 ftruncate 和 fsync 操作感到惊讶。我编写了一个程序，在 Linux 64 位系统上创建一个空文件，将其截断为 0xffffffff 字节，然后 fsync 它。 在所有操作
我有一个 each 函数来确定何时单击 ID 中的链接。单击发生后，它会获取相关属性并将它们关联到主图像。 此功能还可以包括一个视频，因此如果 html 包含一个名为 #video 的 ID它采用视频
我有一个带有 TextBox 的简单 WM7 页面.此外，我分配了EventToCommand (一个 RelayCommand )到这个 TextBox , 对 TextChanged 使用reac
我正在使用 jquery fadein fadeout 和慢速选项，但它对我来说仍然有点太快了。现在我读到你只能在快和慢之间进行选择，但是有没有办法让它变慢呢？ 最佳答案 你有两个选择。第一种是在调用
当我使用onSensorChanged()测试手机的加速度计时，发现它响应速度很快。几乎每1~3msonSensorChanged()就会被激活。我查了一些其他手机的信息，感觉有点奇怪，所以我怀疑我的
我正在使用 Java 和 OpenGL 为 Android 编写游戏。我可以将所有内容完美地渲染到屏幕上，但是当我尝试检查两个对象是否发生碰撞时，我的算法会在碰撞发生在屏幕上之前检测到碰撞。 这是我测
我正在开发一个 android 应用程序，当我从我的设备按下后退按钮时(一个人的正常按下时间，1 秒或更短)，它从我的 Activity 跳到上一个 Activity (菜单)然后退出应用程序。但如果
我有 2 个 Activity ，我想在两个 Activity 之间创建一个动画过渡，这样两个 Activity 的 View 都会向上滑动，就好像第二个 Activity 正在向上插入第一个 Act
我有一个使用 jquery 的 setIntervall() 函数无限滑动图像的网站。 在 Chrome 13 中调用页面时，我切换到另一个选项卡几秒钟后返回，图像滑动速度更快，就好像它试图保持在没有
请考虑以下 ViewModel 片段: var id, given1, given2; $.get("testSynUfGet.aspx", null, function (data) { i
我目前正在使用 SmoothDivScroll 来实现图像的滚动流。但是，左边的 Hotspot 太快了，而 Right Hotspot 似乎 react 不正常。 我设置了一个 fiddle 来展示
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我有 2 个使用 Javascript 中的 Fetch API 的 HTTP 请求。我的主要语言是 Java，但我的任务是负责一个前端项目，所以我不确定是否有一个简单的解决方案。我的问题是，第一个调
我有 2 个使用 Javascript 中的 Fetch API 的 HTTP 请求。我的主要语言是 Java，但我的任务是负责一个前端项目，所以我不确定是否有一个简单的解决方案。我的问题是，第一个调
在我的应用程序中，我有一个项目列表和一个删除最后一个项目的按钮。然后在我的 Controller 上我写了以下操作: removeLastItem: -> lastItem = cur
我是一名优秀的程序员,十分优秀！