HTML/CSS 菜单悬停链接
Posted
技术标签:
【中文标题】HTML/CSS 菜单悬停链接【英文标题】：HTML/CSS menu hover links 【发布时间】：2013-03-13 22:25:09 【问题描述】：我的菜单悬停链接有问题。我有菜单 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;
我想让我的链接独立于其他链接。例如现在，当我将鼠标悬停在链接上时，我的菜单会展开并且看起来不太好。当我悬停菜单不展开时，我想让我的悬停链接独立于其他链接。我该怎么做？
【问题讨论】：
【参考方案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/
【讨论】：
我已将图像取出，因为该图像未在外部托管。这是一个概念验证小提琴，所以我用背景颜色代替了它。【参考方案2】：我让.hover 使用绝对定位，然后给.menu #nav li（它的父级）相对定位，然后相应地定位.hover。如果此悬停菜单用于用户交互（子菜单？），您将需要使用.menu #nav li 来实现悬停效果，而不是a，因为目前只有小文本区域用作悬停区域，而不是整个@ 987654330@.
jsFiddle
（博客隐藏在图片中的悬停效果后面）
我做了这些更改：
.menu #nav li
position:relative;
.menu li a:hover + .hover
position:absolute;
left:100%;
background-color:#F00;
z-index:1;
更新
由于您想要链接附近的悬停效果，因此我将页面稍微移动了一下，就在这里。请注意，.hover 现在位于您的锚点内，因为我们希望相对于它的位置来定位它。
jsFiddle
HTML
<li>
<div>
<a href="#">
HOME
<div class="hover"></div>
</a>
</div>
</li>
CSS
.menu #nav li a 位置：相对； .hover 显示：无； 一：悬停。悬停 背景图像：url（图像/悬停.png）； 背景位置：中心； 宽度：96px； 高度：33px； 颜色：#ca6666； 字体粗细：粗体； 显示：块； 边距顶部：-20px;
position:absolute;
left:100%;
background-color:#F00;
z-index:1;
【讨论】：
现在我的图片显示远离我的链接。 ;S【参考方案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 菜单悬停链接的主要内容，如果未能解决你的问题，请参考以下文章
悬停在子菜单上后保持父菜单项突出显示（HTML/CSS/Jquery）