CSS 用于 Wordpress Customizr 主题导航悬停动画

Question

一段时间以来，我一直在为这件看似微不足道的事情绞尽脑汁，但我已经束手无策了。我是运行我网站上的免费 Customizr 主题。

我想要实现的是 hover effect in the navigation bar like this demo here. 如您所见，只有下拉菜单项的文本带有漂亮的下划线。

我在此处找到并尝试使用此 CSS 代码：

.sliding-middle a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle a:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
    width: 100%;
    background: #08c;
}

然而，我得到的结果 as you can see here，下拉菜单项一直带有下划线。我发现如果我不针对 "a" 标签，该行在主菜单项上会显得更加奇怪。但是这样做，整个子菜单都继承了这个效果。

如果有人知道我遗漏了什么，请帮助我。提前致谢！

Answer 1

您要实现的示例在 a 中使用了两个跨度节点，并且只针对第一个节点（添加一个伪 :before）CSS

.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
    background-color: #313131;
    visibility: visible;
    -webkit-transform: translate3d(0,0,0) scaleX(1);
    -moz-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
}

如果您为 link 文本添加跨度，您应该会得到几乎相同的结果。

Answer 2

好的！经过几天的压力和破坏我的网站，我终于解决了这个问题。

首先，正如@janh2 提到的，您需要获取页面以将span 标签添加到导航菜单标签。我问了一个不同的问题 .

接下来就是简单地使用下面的方法得到结果：

.sliding-middle span {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle span:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
    width: 100%;
    background: black; /*colour you want your line to be*/

希望对大家有所帮助。

CSS 用于 Wordpress Customizr 主题导航悬停动画

CSS for Wordpress Customizr Theme Navigation Hover Animation

css

wordpress

navigationbar