html - 避免在鼠标悬停时颤动

Question

我正在尝试为我的网页制作一个左侧导航菜单，它看起来类似于下图:

这是我面临的问题的 jsfiddle。 http://jsfiddle.net/rzr4Z/

我的 html 如下所示

<ul id="nav">
    <li><a href="#first-page" id="first_id">First</a><img src="images/navbar-icons/first.png" />
    </li>
    <li><a href="#second-page" id="second_id">Second</a><img src="images/navbar-icons/second.png" />
    </li>
    <li><a href="#third-page" id="third_id">Third</a><img src="images/navbar-icons/third.png" /> <img
        src="images/navbar-icons/third.png" />
        <ul id="side-menu">
            <li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" />
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 1</li>
        </ul></li>
    <li><a href="fourth-page" id="fourth_id">Fourth</a><img src="images/navbar-icons/fourth.png" />
    </li>
</ul>

CSS:

ul#nav {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
    text-align: center;
}

ul#nav li {
    font-size: 250%;
    line-height: 25px;
    padding: 7px 0;
    margin: 0;
}

ul#nav li a {
    display: block;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #333333;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #a61607;
    text-decoration: none;
}

ul#nav li img {
    display: none;
}

ul#nav a:hover#first_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#second_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#third_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#fourth_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav li ul#side-menu {
    display: none;
    position: absolute;
}

ul#nav li:hover ul#side-menu {
    font-size: 30%;
    list-style-type: none;
    line-height: 2px;
    color: #a61607;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 310px;
    left: 250px;
}

ul#nav li:hover ul#side-menu li {
    float: none;
}

ul#nav li:hover ul#side-menu li img {
    position: absolute;
    top: 400px;
    left: 0px;
}

与其做类似的事情，

ul#nav a:hover+img {
    display: block;
    position: relative;
    top: -25px;
}

我必须为 css 中的每个 li 元素使用不同的 ID，因为每个翻转图像都有不同的大小和宽度，以便我可以针对它们相应的翻转位置单独调整它们。为每个菜单项使用不同的 ID 是否是获得预期效果的正确方法？

然而，主要问题是，当我将鼠标悬停在每个菜单项的图像上时，我开始获得飘动效果，而这种飘动的悬停效果看起来并不容易。将鼠标悬停在 #third-page 菜单项上时，子菜单的图像(子菜单项会出现，但 img 不会出现)也不会出现。

关于如何解决此抖动问题并获得此菜单的正确效果有什么建议吗？

Answer 1

在您的情况下使用不同的 ID 没问题。至于抖动问题，我可以通过更改您的 CSS 的这一部分来消除它:

ul#nav a:hover#first_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#second_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#third_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#fourth_id+img {
    display: block;
    position: relative;
    top: -25px;
}

为此:

ul#nav li:hover #first_id+img {
    display: block;
}

ul#nav li:hover #second_id+img {
    display: block;
}

ul#nav li:hover #third_id+img {
    display: block;
}

ul#nav li:hover #fourth_id+img {
    display: block;
}

发生的事情是，当您将鼠标悬停在第三个链接上时，图像的大小会插入链接，使其在 li 中居中。如果图像出现后您的鼠标恰好悬停在链接的左侧或右侧，则您不再悬停在链接上，因此它会消失，然后立即重新出现，因为现在您再次悬停在链接上.. .等

检测 :hover 在 li 本身上修复了这个问题，这样当您将鼠标悬停在 li 上时图像就会出现，无论您是将鼠标悬停在链接、图像还是它们周围的任何空间上。

希望这对您有所帮助。