0

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

这是我面临的问题的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 是否是获得所需效果的正确方法？

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

关于如何解决这种抖动并获得此菜单的正确效果的任何建议？

4

5 回答 5

2

解决问题的诀窍有两点：

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

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

通过将:hover效果放在LI相反的位置上，:hover无论鼠标是否在AOR上，都会引起 升高IMG- 所以当IMG标签弹出可见并且所有内容都改变大小时，您的鼠标仍然悬停在LI包含这两个元素的 - 和瞧 - 不闪烁。

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

请参阅您的 jsFiddle的以下更新。

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

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

于 2012-08-09T17:10:10.147 回答
2

在您的情况下，使用不同的 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 的中心。如果图像出现后您的鼠标碰巧悬停在链接的左侧或右侧，那么您不再将鼠标悬停在链接上，因此它会消失，然后立即重新出现，因为现在您再次将鼠标悬停在链接上.. 。 ETC。

检测 :hover 在 li 本身上可以解决此问题，以便在您将鼠标悬停在 li 本身上时显示图像，无论您是悬停在链接、图像还是它们周围的任何空间上。

希望这可以帮助。

于 2012-08-06T18:50:58.133 回答
1

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

  1. 最小宽度、最大宽度和
  2. 最小高度，最大高度

仔细使用以下 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;
}​

现在不飘了

于 2012-08-07T13:36:08.797 回答
0

You can either do:

ul#nav li a{display: block;}

or

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

so mouseleave doesn't fire on mouseenter

于 2012-08-09T09:11:42.330 回答
0

你的代码：

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

仔细看我上一个答案，你错过了一些重要的属性，比如 height:300px; 和宽度：200px；

简单地指定以 max,min 为前缀的属性是不够的，您应该添加特定的高度和宽度设置，然后颤动就会消失。

于 2012-08-08T18:22:23.647 回答