Question

我刚接触编码，只是为了在问这些问题之前清除字段lol。我偶然发现了一篇文章，当你将它们悬停在它们上面时，你可以为它们设置动画。这是文章http://bradsknutson.com/blog/css-sliding-underline/。我将滑动中间代码整合到我的博客中，如图所示;

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

我已将此代码添加到博客中的“添加CSS”框中，并将此代码粘贴到我的HTML代码中的行之前，两者都没有效果。非常感谢帮助！ #noobcoderprobs

Answer 1

使用您的网站标记为您的网站使用此代码：

.widget-content a:after {
    border-bottom: 0 solid transparent;
    content: "";
    display: inline-block;
    height: 10px;
    left: 0;
    position: absolute;
    top: 100%;
    transition: all 0.5s ease 0s;
    width: 0;
}
.widget-content a:hover:after {
    border-bottom: 3px solid blue;
    width: 100%;
}

为此，您必须使父李位置相对。

.widget-content li{position: relative}

在您的网站上测试并运行。

Answer 2

您无法将代码粘贴到模板中。您需要根据菜单标记更改选择器。这是我修改的代码。只需粘贴它，就完成了：

.PageList li a {
display: inline-block;
position: relative;
}
.PageList li a:hover:after {
width: 100%;
background: blue;
}
.PageList li a::after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

您必须将代码粘贴到模板HTML编辑器中，然后将其粘贴到HTML小部件中。

我已在您的网站上对其进行测试，但它确实有效！

悬停在Blogger中时的动画下划线

2 个答案: