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

DEMO ：https://jsfiddle.net/index23/ety2z0zu/9/

有解决方案吗？

Answer 1

CSS将是推荐。但这是你的问题的答案https://jsfiddle.net/ety2z0zu/11/。请从JavaScript中删除img.style.bottom = bottom;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

对于鼠标 - 使用样式:hover
要在元素下显示图片，请使用带content

after

看看这个Demo

Answer 3

为什么不简单地使用css？

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

.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.从padding-top移除.main-nav li 2.从padding-top添加.main-nav li a 3.添加：

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

现在一切都差不多了，除了你可以点击“整个”按钮，它现在有更高的高度，就像它可见一样。 https://jsfiddle.net/ety2z0zu/16/

Answer 5

我想我发现了什么问题。问题可能出现在鼠标悬停的图像上。当图像出现时，它会越过标签，浏览器会触发鼠标移出事件，然后图像隐藏和浏览器将鼠标悬停在事件中等等。

谢谢大家的帮助。

JavaScript的onmouseover和onmouseout事件导致闪烁

5 个答案: