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中使用两个span-nodes，并且仅使用此CSS定位第一个（添加伪：before）

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

如果为链接文本添加跨度，则应得到几乎相同的结果。

Answer 2

好的！经过几天强调并打破我的网站后，我终于彻底解决了这个问题。

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

接下来，只需使用以下内容即可获得结果：

.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*/

我希望这可以帮助你们。

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

2 个答案: