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。

悬停状态已经完成，但每次悬停都会产生一个blingking。您可以在此链接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 {
  ...
}

删除我的悬停图片

1 个答案: