CSS for Wordpress Customizr主题导航悬停动画

我一直在为这个看似微不足道的事情忙了一会儿，但我在我的智慧结尾。我在我的网站上运行免费的Customizr主题。CSS for Wordpress 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”标签，这条线在主菜单项上会显得更奇怪。但是通过这样做，整个子菜单都会继承这个效果。

如果有人有任何想法我想念，请帮助我。先谢谢你！

来源

2017-10-08 JustFoxeh

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

首先，如@ 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*/

我希望这可以帮助你们。

来源

2017-10-09 09:19:44 JustFoxeh

要实现这个例子使用了一个内部的两个跨度节点，只针对第一个（添加伪：前）如果你添加一个跨度链接文本与此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); 
}

，你应该得到几乎相同的结果。

来源

2017-10-08 14:15:50 janh

谢谢，janh2。是的，我注意到了span标签。但是，我不知道如何将该跨度添加到单个链接，因为导航栏是由主题生成的。另外，-webkit-和-moz-属性是强制性的吗？ – JustFoxeh

您是否创建了一个儿童主题（如果您想更改内容，您应该怎么做）？如果菜单是使用'wp_nav_menu（）'（通常是）生成的，则可以使用[自定义漫游器]（https://codex.wordpress.org/Class_Reference/Walker）来更改输出并添加您需要的跨度。 – janh

是的，我为所有定制使用儿童主题。对不起，但我真的失去了这一点。在谷歌搜索了一下关于自定义步行者以将标签放入标签之后，我得到了一堆我无法做出正面或反面的代码。到目前为止，我的理解是，我可以使用walker来编辑'wp_nav_menu'，并以某种方式将span扩展到标签中。 – JustFoxeh

CSS for Wordpress Customizr主题导航悬停动画

回答

相关问题