我通过内联“ul”的“li”-s 实现了我的网页菜单。 “li”有彩色边框并包含“a”。现在在鼠标悬停时,我需要更改“a”内文本的颜色,并通过不移动 li 边框将其向上移动 2px。我该怎么做?
编辑:
这是我的代码:
HTML -->
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> <!-- end menu -->
CSS-->
div#menu ul
{
list-style-type:none;
}
div#menu li
{
margin-left:2px;
display:inline-block;
border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;
}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}
最佳答案
你可以这样做:
li:hover {
border-top: none;
}
# Note: this is different from 'li a:hover'!
li:hover a {
position: relative;
top: -2px;
}
关于html - 将 <li> 中的文本基线向上移动 2 px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8199971/