Question

我的菜单悬停链接有问题。我有一个菜单 HTML：

  <div class="menu">
            <ul id="nav">
                <li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
                <li><div><a href="#">ABOUT</a><div class="hover"></div></div></li>
                <li><div><a href="#">PORTFOLIO</a><div class="hover"></div></div></li>
                <li><div><a href="#">SERVICE</a><div class="hover"></div></div></li>
                <li><div><a href="#">BLOG</a><div class="hover"></div></div></li>
                <li><div><a href="#">CONTACT</a><div class="hover"></div></div></li>
            </ul>
        </div>

CSS：

.menu {
    width: 950px;
    height: 50px;
    float: right;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    margin-top: 80px;
    border: 1px #FFF solid;
}

.menu #nav {
    list-style: none;   
}

.menu #nav li {
    display: inline-block;
    padding: 0px 30px 0px 30px;
}

.menu #nav li a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}

.menu #nav li a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    color: #ca6666;
}

.menu #nav li a .hover {
    display:none;
}


.menu li a:hover + .hover {
    background-image:url(images/hover.png);
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;  
    display: block;
    margin-top: -20px;
}

.clear {
    clear: both;
}

我想让我的链接独立于其他人。例如，现在，当我将鼠标悬停在链接上时，我的菜单会展开，而且看起来不太好。当我悬停菜单而不是展开时，我想让我的悬停链接独立于其他链接。我怎么能这样做？

Answer 1

您应该尝试绝对定位.hover元素，以便将其从文档流中取出，因此不会影响链接的大小：

当然，这意味着你必须让父母相对定位，即position: relative。

[编辑]：当您在链接上触发:hover事件时，您将在浏览器中启动无限悬停循环，因为<div class="hover">元素不是<a>的子元素元素，因此它开启和关闭。

我建议您将<div class="hover">元素作为链接的子元素，即代替：

<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>

使用：

<li><div><a href="#">HOME<div class="hover"></div></a></div></li>

然后对于:hover事件，请使用直接后代选择器>。这是解决您问题的最小CSS（您可以查看我在下面发布的Fiddle链接中的所有内容）。

.menu #nav li > div {
    position: relative;
}
.menu #nav li a > .hover {
    display: none;
}
.menu #nav li a:hover > .hover {
    background: #333;
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;
    display: block;
    top: -20px;
    position: absolute;
}

请查看概念验证小提琴 - http://jsfiddle.net/teddyrised/e92Dj/

Answer 2

我让.hover使用绝对定位，然后给.menu #nav li（其父级）相对定位，然后相应地定位.hover。如果此悬停菜单用于用户互动（子菜单？），则需要使用.menu #nav li作为悬停效果，而不是a，因为目前只有小文本区域用作悬停区域，不是整个li。

jsFiddle

enter image description here

（博客隐藏在图片中的悬停效果背后）

我做了这些改变：

.menu #nav li {   
    position:relative;
}
.menu li a:hover + .hover {
    position:absolute;
    left:100%;
    background-color:#F00;
    z-index:1;
}

更新

由于您希望链接附近有悬停效果，因此我将页面稍微移动了一下，就在这里。请注意，.hover现在位于您的锚点内，因为我们希望将其相对于其位置进行定位。

jsFiddle

enter image description here

<强> HTML

<li>
    <div>
        <a href="#">
            HOME
            <div class="hover"></div>
        </a> 
    </div>
</li>

<强> CSS

.menu #nav li a { 位置：相对; } .hover { 显示：无; } a：悬停.hover { 背景图像：网址（图像/ hover.png）; 背景位置：中心; 宽度：96px; 身高：33px; 颜色：＃ca6666; font-weight：bold; 显示：块; margin-top：-20px;

position:absolute;
left:100%;
background-color:#F00;
z-index:1;

}

Answer 3

您可以尝试

<body id="Top">
<div class="menu">
           <ul id="nav">
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>HOME</a> <div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>ABOUT</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>PORTFOLIO</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>SERVICE</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>BLOG</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>CONTACT</a><div class="hover"></div></div></li>
           </ul>
       </div>

HTML / CSS菜单悬停链接

3 个答案:

更新