在博客中懸停時動畫下劃線

我是新來的編碼，只是爲了清除領域之前問這些問題哈哈。我偶然發現了一篇文章，在這篇文章中，當你將鏈接懸停在它們上方時，你的鏈接就會變爲動畫。這是文章http://bradsknutson.com/blog/css-sliding-underline/。我將滑動中間的代碼合併到我的博客中，如下所示;在博客中懸停時動畫下劃線

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

我已經添加了這個代碼在博客「添加CSS」複選框，並在我的HTML代碼行之前將這些代碼，也沒有工作。非常感謝幫助！ #noobcoderprobs

來源

2014-10-18 Fiona Chan

您不能將代碼粘貼到您的模板中。您將需要根據菜單標記更改選擇器。這是我修改的代碼。只需粘貼它即可：

.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小部件中。

我已在您的網站上測試它，它的工作原理！

來源

2014-10-18 01:33:32

你是神，如果你需要，我會給你我的左臂。 – 2014-10-18 01:58:19

我是一個像你一樣的人：P。順便說一句，你可以投我的答案，如果你有用 – 2014-10-18 02:00:42

我需要15代表投票了，一旦我達到了，我會回到這個職位，並投票！ – 2014-10-18 02:14:50

使用此代碼爲您的網站，使用你的網站標記：

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

經過測試，適用於您的網站。

來源

2014-10-18 01:31:18 Charles

在博客中懸停時動畫下劃線

回答

相關問題