Question

我正在尝试为我的网页制作一个左侧导航菜单，看起来如下图所示：

我的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中居中。如果你的鼠标碰巧在图像出现时徘徊在链接的左侧或右侧，那么你就不会再在链接上空盘旋，所以它会消失，然后立即重新出现，因为现在你再次盘旋在链接上...等等。

检测：将鼠标悬停在li上本身会修复此问题，以便在您将鼠标悬停在li本身上时显示图像，无论您是否将鼠标悬停在链接，图像或其周围的任何空间上。

希望这有帮助。

Answer 2

解决问题的方法有两点：

1）使LI项目固定宽度 2）在LI上进行“悬停”效果，而不是A

您遇到“闪烁”的原因正是上面所描述的。当您将:hover效果应用于A标记，并且标记的大小不固定时，您会在鼠标导致:hover，{{{{ 1}}移动从鼠标下方引出它的对象 - 这会导致效果结束，将对象放回鼠标下 - 这会再次导致它。无尽的因果无效，让你闪烁。

通过将:hover效果放在:hover上，无论鼠标是LI还是:hover，都会导致A被提升 - 所以当IMG标签弹出可见且一切都移动大小时，你的鼠标仍然悬停在包含两个元素的IMG上 - 并且瞧 - 没有闪烁。

是由您的方法引起的另一个问题，但是，由于图像的大小。因为你的图像由于它们的高度而向下分流（大图像） - 当你到达图像的底部并滚动下一个LI时 - 一切都会从你的鼠标下移出并导致类似的问题。然而，这通常不会导致闪烁本身。

请参阅以下update to your jsFiddle。

正如您将看到的，“高度”问题出现在“第三”条目上。这也可以通过明确设置高度/宽度并使用精确大小的图像来解决 - 或者（更有效地）使用LI CSS规则而不是background: url(...);标签 - 因为它们更容易剪辑/ resize。

如果您需要一些带有子菜单的其他基于CSS的翻转菜单的示例，请查看this jsFiddle，其中演示了更加模块化的下拉菜单方法等。可以使用背景图形轻松修改它以满足您的需求。

Answer 3

当我们不指定以下css属性时会发生此问题：

min-width，max-width和
min-height，max-height

仔细使用以下css属性可以提供帮助：

#parent_id:hover
{
  //use borders to find space required for correct width/height
}

#parent_id>#child_id:hover
{
  //use borders to find space required for correct width/height
}

#parent_id:hover, #child_id:hover
{
  //use borders to find space required for correct width/height
}

因此请确保添加这些内容。

请记住这一点：

永远不要没有边框的css，始终确保为几乎所有节点添加边框，这有助于清楚地了解占用多少空间，并且在这样的css中更容易出现锻炼错误

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}

ul#nav li {
border:1px solid green;
font-size: 250%;
line-height: 25px;
max-height:200px;
padding: 7px 0;
margin-top: 10px;
max-height:50px;
}
ul#nav li a {
border:1px solid black;
}
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 {
max-height:50px;
color: #a61607;
text-decoration: none;
}

ul#nav li img {
display: none;
}

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

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

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

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

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

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;
width:48px;
height:48px;
top: 400px;
left: 0px;
}

现在没有飘飘

Answer 4

您的代码：

ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position:absolute;
    max-height:300px;
    max-width:200px;
    border:5px solid red;
    overflow:hidden;
}

我的代码：

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}

仔细看看我的最后一个答案，你错过了身高等重要属性：300px;和宽度：200px;

仅指定max，min-prefixed属性是不够的，您应该添加特定的高度和宽度设置，然后才会消失。

Answer 5

您可以这样做：

ul#nav li a{display: block;}

或

ul#nav li{text-align: left;}

所以mouseleave mouseenter不会触发{{1}}

避免鼠标悬停时飘动

5 个答案: