在mousemove上显示/隐藏div

Question

我有一个广播网站，当鼠标移动时我需要隐藏菜单，并在鼠标移动时显示它。 它的工作几乎完美，除了一个错误 - 菜单只在第二次隐藏，如果我将它悬停。

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>

Answer 1

所以这是一种解决方案，感觉就像我用restrict概念实现的黑客，因为你需要在显示时点击菜单。因此，在mousemove上添加一个类pointer-events:none，它启用单击并将菜单div的show设置为1，当鼠标仍然时，div的不透明度设置为0，指针事件设置为none。
我使用了css的opacity属性而不是jquery的transition和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;
}

Answer 2

您提供的代码不完整。我修好了（我希望）。主要问题在于为mousemove定义事件处理程序。见下面的工作示例：

HKey_Local_Machine\Software\Classes\AppID\

你可以在这里看到它：https://jsfiddle.net/oeu77wgv/

Answer 3

只需将间隔设置为1而不是500（以毫秒为单位），并使用show（）和hide（）方法代替fadeIn（）和fadeOut（），因为默认情况下它们的播放时间为400毫秒。

我还将display:none添加到.hide CSS类，现在它已隐藏在初始版本。

现在，仅当鼠标在上部div上移动时，内部div才可见。

＆＃13;

＆＃13;

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);
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;