javascript - 删除悬停图像上的闪烁

Question

为了简单起见，我添加了一个 jquery 函数，它允许我插入一个元素以将图像添加到菜单中:

$('.menu-item').append('<div class="hover--state"><img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png" /> </div>');

附加完成后，这将是我的菜单的布局。

    <li class="menu-item">
        <a href="#">Home</a>
        <div class="hover--state">
           <img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png">
        </div>
    </li>

我的悬停CSS代码:

#top-menu-nav > ul > li > a:hover + div{
     display: block;
}

当状态处于悬停状态时，我附加的图像是菜单的阴影图像，因此每次状态悬停时，都会显示我添加了 display: block 的图像。当没有发生悬停时，图像将为 display: none 。

悬停状态已经完成，但我所做的每次悬停都会闪烁。您可以在此链接 http://myway-hannover.de/ 上检查闪烁的悬停。

Answer 1

问题不在于您的 jQuery 函数 - 这是 CSS 问题。

现在发生的情况是，当悬停状态被激活时，它会覆盖 <a>元素，然后停用悬停状态。您需要确保当阴影图像存在时悬停状态保持激活状态。您可以通过将悬停检测移至 <li> 来完成此操作。级别如下:

改变

#top-menu-nav > ul > li > a:hover + div {
  ...
}

至

#top-menu-nav > ul > li:hover > .hover--state {
  ...
}