HTML/CSS 菜单悬停链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15597863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS menu hover links
提问by user2204367
I have problem with my menu hover links. I have a menu HTML:
我的菜单悬停链接有问题。我有一个菜单 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:
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;
}
and I want to make my links independent from others. For example now, when I hover over links my menu expands and it's not looking great. I want to make my hover links independent from others when I hover my menu not expands. How can I do that?
我想让我的链接独立于其他人。例如，现在，当我将鼠标悬停在链接上时，我的菜单会展开并且看起来不太好。当我悬停菜单不展开时，我想让我的悬停链接独立于其他链接。我怎样才能做到这一点？
回答by Terry
You should try to position the .hoverelement absolutely, so that it is taken out of the document flow and therefore will not affect the size of the links:
您应该尝试.hover绝对定位元素，以便将其从文档流中取出，因此不会影响链接的大小：
That, of course, means you have to make the parent relatively positioned, i.e. position: relative.
这当然意味着您必须使父对象相对定位，即position: relative.
[Edit]: You will initiate an infinite hover loop in the browser when the :hoverevent is triggered on the link, because the <div class="hover">element is not a children of the <a>element, therefore it flickers on and off.
[编辑]：当在:hover链接上触发事件时，您将在浏览器中启动无限悬停循环，因为该<div class="hover">元素不是该元素的子<a>元素，因此它会闪烁。
I would suggest that you make the <div class="hover">element a child of the link, i.e, instead of:
我建议您将该<div class="hover">元素设为链接的子元素，即，而不是：
<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
Use:
用：
<li><div><a href="#">HOME<div class="hover"></div></a></div></li>
And then for the :hoverevent, use the direct descedent selector >. Here is the minimal CSS that will solve your issue (you can view everything in the Fiddle link I posted below).
然后对于: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;
}
Do check out the proof-of-concept fiddle here - http://jsfiddle.net/teddyrised/e92Dj/
请在此处查看概念验证小提琴 - http://jsfiddle.net/teddyrised/e92Dj/
回答by Daniel Imms
I made .hoveruse absolute positioning and then gave .menu #nav li(its parent) relative positioning and then positioned .hoveraccordingly. If this hover menu is intended for user interaction (a sub menu?) you will need to use .menu #nav lifor your hover effect, not abecause currently only the small text area is used as the hover area, not the whole li.
我.hover使用绝对定位，然后给.menu #nav li（它的父）相对定位，然后相应地定位.hover。如果此悬停菜单用于用户交互（子菜单？），您将需要.menu #nav li用于悬停效果，而不是a因为当前仅使用小文本区域作为悬停区域，而不是整个li.
(Blog is hidden behind the hover effect in the picture)
（博客隐藏在图片中的悬停效果后面）
I made these changes:
我做了这些改变：
.menu #nav li {
position:relative;
}
.menu li a:hover + .hover {
position:absolute;
left:100%;
background-color:#F00;
z-index:1;
}
Update
更新
Since you wanted the hover effect near the link, I shuffled the page around a little and here it is. Note that .hoveris now inside your anchor as we want to position it relative to it's location.
由于您想要链接附近的悬停效果，我将页面稍微移动了一下，就在这里。请注意，.hover现在位于您的锚点内，因为我们希望将其相对于其位置进行定位。
HTML
HTML
<li>
<div>
<a href="#">
HOME
<div class="hover"></div>
</a>
</div>
</li>
CSS
CSS
.menu #nav li a { position:relative; } .hover { display:none; } 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;
.menu #nav li a { position:relative; } .hover { 显示：无；} a:hover .hover { background-image:url(images/hover.png); 背景位置：中心；宽度：96px；高度：33px；颜色：#ca6666；字体粗细：粗体；显示：块；边距顶部：-20px；
position:absolute;
left:100%;
background-color:#F00;
z-index:1;
}
}
回答by Gamer Vang
You Can try this
你可以试试这个
<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>
