JavaScript 的 onmouseover 和 onmouseout 事件导致闪烁

Question

我对 JavaScript、onmouseover 和 onmouseout 事件有疑问。当鼠标到达所需元素的底部边缘时，鼠标悬停和鼠标移开效果开始闪烁。这是示例：

function menuHover(field)
{
     var img = field.nextElementSibling;
     var height = img.height;
     var bottom = 0 - Math.floor(height / 2);
     bottom += 'px';
     img.style.display = 'block';
     img.style.bottom = bottom;
}

function menuHoverOut(field)
{
    var img = field.nextElementSibling;
    img.style.display = 'none';
}

演示: https://jsfiddle.net/index23/ety2z0zu/9/

有解决办法吗？

Answer 1

CSS 是建议。但这里是您问题的答案 https://jsfiddle.net/ety2z0zu/11/。请从您的 JavaScript

中删除 img.style.bottom = bottom;

function menuHover(field) {
  var img = field.nextElementSibling;
  var height = img.height;
  var bottom = 0 - Math.floor(height / 2);
  bottom += 'px';
  img.style.display = 'block';
  // console.log(height);
}

function menuHoverOut(field) {
  var img = field.nextElementSibling;
  img.style.display = 'none';
}

a,
a:link {
  color: inherit;
  text-decoration: none;
}
body {
  background-color: #2a4b8b;
}
header nav {
  text-align: center;
  position: relative;
}
.main-nav {
  margin: 0 auto;
  padding-right: 25px;
  list-style: none;
  display: inline-block;
}
.main-nav li {
  float: left;
  margin-right: 23px;
  display: block;
  padding-top: 50px;
  -webkit-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  -moz-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  position: relative;
}
.main-nav li a {
  display: block;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 3px;
  border-bottom: 5px solid #6173ad;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.hover-img {
  display: none;
  position: absolute;
  left: 0px;
  width: 100%;
  height: auto;
}

<header>
  <nav>
    <ul class='main-nav'>
      <li>
        <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
        <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
      </li>
      <li>
        <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
        <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
      </li>
    </ul>
  </nav>
</header>

Answer 2

尝试重写您的代码以使用 css 鼠标跟踪的可能性。

对于鼠标 - 使用样式 :hover
要在元素下显示图像 - 使用 css 指令 content 和 after

看看这个Demo

Answer 3

为什么不直接使用 css？

通过在父 LI 元素上使用 :hover 伪 class，您可以控制图像的可见性，如下所示：

.main-nav li img.hover-img {
    display: none;
}

.main-nav li:hover img.hover-img {
    display: inline;
}

查看实际效果：

https://jsfiddle.net/vugjp340/1/

也许加上不透明度过渡效果会更好。

Answer 4

为什么要在 javascript 而不是 css 中做这种效果？

这里有三个小变化： 1. 从 .main-nav li 中删除 padding-top 2. 从 .main-nav li a 添加 padding-top 3. 添加：

.main-nav li:hover img.hover-img {
    display:block;
}

除了您可以单击 "entire" 按钮之外，现在一切都几乎相同，它现在具有更高的高度，就像它是可见的一样。 https://jsfiddle.net/ety2z0zu/16/

Answer 5

我想我已经找到问题所在了。问题可能出在鼠标悬停时出现的图像中。当图像出现在标签上时，浏览器触发鼠标移出事件，然后图像隐藏和浏览器触发鼠标悬停事件等等。

谢谢大家的帮助。

JavaScript 的 onmouseover 和 onmouseout 事件导致闪烁

JavaScript's onmouseover and onmouseout events causing blinking

javascript

html

onmouseover

onmouseout