将鼠标悬停在菜单项上时如何下划线？

Posted 2023-03-06

【中文标题】将鼠标悬停在菜单项上时如何下划线？

【英文标题】：How to underline a menu item when hover over it?

【发布时间】：2020-06-20 08:11:16

【问题描述】：

我现在正在使用 WordPress 构建以下网站：https://shaveiceberlin.de

当我将鼠标悬停在菜单项上时，如何获得下划线效果，例如在此网站上：https://snocks.com？

我当前的css代码：

#site-header.center-header #site-navigation-wrap .middle-site-logo:hover img 
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;

感谢可爱的团队帮助我！ 亲切的问候， 乔纳斯

【问题讨论】：

几十年来这些浏览器都不需要这些供应商前缀。

【参考方案1】：

您可以将伪选择器与动画transform 属性结合使用。 transform-origin 很重要，因为它规定了动画从哪里来和返回到哪里。它默认为center，这就是为什么我将它覆盖为left。

.menu a 
  position: relative;
  text-decoration: none;
  font-size: 1.5rem;


.menu a::after 
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;
  background: #ff7000;
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: left;


.menu a:hover::after 
  transform: scaleX(1);

<a href="#">Plain link</a>

<nav class="menu">
  <a href="#">Underline on hover or focus</a>
</nav>

【讨论】：

谢谢安迪！我稍微更改了您的代码，但现在我真的很喜欢结果。但现在下划线效果在按钮、徽标和图片上也是如此。我只需要它在菜单上。你知道如何解决这个问题吗？

@Jonmue 我调整了html 和CSS 以展示如何将样式隔离到特定class 中的锚点。

谢谢安迪！我知道将 css 添加到 Wordpress 很热门，但我不知道如何在 Wordpress 中添加或调整 html。我已经搜索了互联网，但找不到有效的解决方案。你能帮我最后一次吗？

@Jonmue 我很乐意提供帮助，但您应该提出一个新问题。