Question

我已通过li的内联ul实现了我的网页菜单。 li有彩色边框，包含a。现在onmousehover我需要更改a内文字的颜色，并通过不移动2px边框将其移动li。我怎样才能做到这一点？

Answer 1

诀窍是删除顶部填充并稍微增加底部填充以保持标记完整性。

我已经设置了一个你想要的简单例子。在小提琴here

上查看

HTML：

<ul>
  <li><a href="#">Home</a></li>
</ul>

CSS：

ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }

li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }

Answer 2

将此添加到您的CSS：

a:hover.jump {
            color: [Insert whatever];
            position: relative;
            bottom: 2px;
}

然后在链接中添加一个类

<ul>
<li><a href="http://google.com" class="jump">My Link Text</a></li>
</ul>

您可以在悬停文字中添加背景颜色或其他任何内容。陈词滥调但非常有用的网站CSS Ninja有很多例子

在<li> 2 px up </li>中移动文本基线

2 个答案: