在mousemove上显示/隐藏div
在mousemove上显示/隐藏div
提问于 2017-02-03 13:04:23
我有一个广播网站，我需要隐藏菜单时鼠标不移动，并显示，当鼠标移动。它的工作几乎完美，除了一个错误菜单隐藏只有在第二次，如果我悬停它。
var timedelay = 1;
var _delay = setInterval(delayCheck, 500);
$('.parent').on('mousemove', showAllEvent);
function delayCheck() {
if (timedelay == 3) {
$('.hide').fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
function showAllEvent() {
$('.hide').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
}.hide {
height: 100px;
width: 100px;
border: 1px solid red;
color: black;
}
.parent {
width: 100%;
height: 100vh;
border: 1px solid red;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class='parent'>
if you hover me ".hide" is disappearing
<div class='hide'>if you hover me i'm hide on second time</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-02-03 13:33:22
因此，这是一种解决方案，感觉就像我用pointer-events:none的概念实现的一个黑客，因为您需要在菜单显示时单击它。因此，在mousemove上，添加一个类show，它允许单击菜单div并将菜单的opacity设置为1，当鼠标仍在时，div的不透明度设置为0，指针事件设置为none。
我使用了css的transition属性，而不是jquery的fadeIn和fadeOut方法。
var timedelay = 1;
var _delay = setInterval(delayCheck, 500);
$('.parent').on('mousemove', showAllEvent);
function delayCheck() {
if (timedelay == 3) {
$('.hide').removeClass('show');
timedelay = 1;
}
timedelay = timedelay + 1;
}
function showAllEvent() {
$('.hide').addClass('show');
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
}.hide {
height: 100px;
width: 100px;
border: 1px solid red;
color: black;
pointer-events: none;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.parent {
width: 100%;
height: 100vh;
border: 1px solid red;
text-align: center;
}
.show {
opacity: 1;
pointer-events: all;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class='parent'>
if you hover me ".hide" is disappearing
<div class='hide'>if you hover me i'm hide on second time</div>
</div>
Stack Overflow用户
发布于 2017-02-03 13:33:57
您提供的代码不完整。我修好了(我希望)。主要问题在于为mousemove定义事件处理程序。见下面的工作示例：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
var timedelay = 1;
var _delay = setInterval(delayCheck, 500);
$(document).on('mousemove','.parent',function(e){
$("span").text(event.pageX + ", " + event.pageY);
clearInterval(_delay);
$('.hide').fadeIn();
timedelay = 1;
_delay = setInterval(delayCheck, 500);
});
function delayCheck() {
if (timedelay == 3) {
$('.hide').fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
</script>
<style type="text/css">
.hide {
height: 100px;
width: 100px;
border: 1px solid red;
color: black;
}
.parent {
width: 100%;
height: 100vh;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<span></span>
<div class='parent'>
if you hover me ".hide" is disappearing
<div class='hide'>if you hover me i'm hide on second time</div>
</div>
</body>
</html>您可以看到它在这里运行：https://jsfiddle.net/oeu77wgv/
Stack Overflow用户
发布于 2017-02-03 13:34:41
只需将间隔设置为1，而不是以毫秒为单位的500，并使用show()和hide()方法代替fadeIn()和fadeOut()，因为默认情况下它们在400毫秒内动画。
我还将display:none添加到.hide CSS类中，现在它已被隐藏在初始位置。
现在，只有当鼠标在上面的div上移动时，才能看到内部div。
var timedelay = 1;
var _delay = setInterval(delayCheck, 1);
$('.parent').on('mousemove', showAllEvent);
function delayCheck() {
if (timedelay == 3) {
$('.hide').hide();
timedelay = 1;
}
timedelay = timedelay + 1;
}
function showAllEvent() {
$('.hide').show();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 1);
}.hide {
height: 100px;
width: 100px;
border: 1px solid red;
color: black;
display:none;
}
.parent {
width: 100%;
height: 100vh;
border: 1px solid red;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class='parent'>
if you hover me ".hide" is disappearing
<div class='hide'>if you hover me i'm hide on second time</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42025014
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号