html - 将文本基线移入2 px 向上

Question

我已经通过 inline li-s of实现了我的网页菜单ul。li有一个彩色边框并包含a. 现在onmousehover我需要更改内部文本的颜色并通过不移动边框a将其向上移动。我怎样才能做到这一点？ 2pxli

Answer 1

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

我已经建立了一个你想要的简单例子。在这里的小提琴上检查它

的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有很多示例