Pure 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/