純css逐漸改變懸停文字

Question

我試圖在懸停時逐漸改變元素的文字，但它不適用於我。

我有這樣的CSS：

.author-details > div a { 
    display: inline-block; 
    width: 30%; 
    float: none !important; 
    background-color: #1ABC9C; 
    color: #fff; 
    padding: 2% 3% 2% 3%; 
    border-radius: 7%; 
    font-weight: normal; 
    font-size: 16px; 

    -webkit-transition: background 0.35s linear; 
    -moz-transition: background 0.35s linear; 
    -ms-transition: background 0.35s linear; 
    -o-transition: background 0.35s linear; 
    transition: background 0.35s linear; 

    -webkit-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45); 
    -moz-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45); 
    box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45); 
} 

.author-details > div a:after { 
    content: 'Others'; 
} 

.author-details > div a:hover { 
    background-color: #5DADE2; 
} 

.author-details > div a:hover:after { 
    -webkit-animation:fade-in 0.35s ease-in; 
} 

@-webkit-keyframes fade-in{ 
0%{ 
    opacity:1; 
    top:0px; 
} 
50%{ 
    opacity:0; 
    top:-5px; 
    content: 'Me'; 
} 
100%{ 
    opacity:1; 
    top:-5px; 
} 

}

而這個HTML：

<div><label>View as:&nbsp;&nbsp;</label> <a href ="#" onClick="return false" onmousedown="javascript:swapContent('con1');"></a></div> 

然而，當我徘徊在文本不會更改的元素。當我徘徊時，我想讓它變成「我」，當我不在時，我會回到「其他」。我怎樣才能做到這一點？

這裏有一個的jsfiddle：http://jsfiddle.net/2fgy912p/

Answer 1

代碼：http://codepen.io/anon/pen/Qbdvob

這種效果的工作原理是利用懸停狀態設置絕對定位元素的不透明度的不透明度和關閉。並且他們已經應用了過渡，所以淡入淡出效果被實現了。

玉器風格的HTML：

.widget 
    span view as: 
    input(type='checkbox',id='toggle') 
    label.select(for='toggle') 
    .default others 
    .hovered you 

的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
.widget { 
    font-family: Open Sans; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
.widget span { 
    vertical-align: top; 
    line-height: 30px; 
} 
label.select { 
    user-select: none; 
    cursor: pointer; 
    background-color: #3ce; 
    color: #fff; 
    border-radius: 2px; 
    width: 60px; 
    vertical-align: top; 
    position: relative; 
    height: 30px; 
    display: inline-block; 
} 
label.select .default, 
label.select .hovered { 
    transition: opacity 1s; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    opacity: 1; 
} 
label.select .hovered { 
    opacity: 0; 
} 

label.select:hover { 
    background-color: #36f; 
} 

label.select .default { 
    opacity: 1; 
} 
label.select .hovered { 
    opacity: 0; 
} 
label.select:hover .default { 
    opacity: 0; 
} 
label.select:hover .hovered { 
    opacity: 1; 
} 

Answer 2

你沒有定義的文本替換時hover的鏈接。應該是：

.author-details > div a:after { 
    content: 'Others'; 
} 
.author-details > div a:hover:after { 
    content: 'Me'; 
} 

FIDDLE：https://jsfiddle.net/lmgonzalves/2fgy912p/3/

EDIT1：

我做一些修改，以添加過渡。看看這是想你想：https://jsfiddle.net/lmgonzalves/2fgy912p/7/

EDIT2：

我硬編碼了top屬性中的每個元素上，應該工作，雖然我看到工作的罰款。檢查：https://jsfiddle.net/lmgonzalves/2fgy912p/9/