将文本基线移动到
中向上 2 像素

发布于 2024-12-16 18:17:24 字数 221 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

や莫失莫忘 2024-12-23 18:17:24

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

我已经设置了一个简单的例子来说明你想要什么。在此处的小提琴上检查

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 ; }

The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.

I have set up a simple example of what you want. Check it on the fiddle here

The HTML:

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

The 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 ; }

回复收藏 0 原文

故事未完 2024-12-23 18:17:24

将其添加到您的 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 有很多示例

Add this to your CSS:

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

And then add a class to your link

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

You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples

回复收藏 0 原文

~没有更多了~