我的菜单悬停链接有问题。我有一个菜单 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;
}
并且我想让我的链接独立于其他链接。例如现在,当我将鼠标悬停在链接上时,我的菜单会展开并且看起来不太好。当我悬停我的菜单时,我想让我的悬停链接独立于其他链接。我该怎么做?
最佳答案
您应该尝试定位 .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;
}
请在此处查看概念验证 fiddle - http://jsfiddle.net/teddyrised/e92Dj/
关于HTML/CSS 菜单悬停链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15597863/