spanWidth = $('li span').width();
$('li span').css('width', '0');
$('li').hover(
function() {
$('span', this).css('width', spanWidth);
},
function() {
$('span', this).css('width', '0');
}
);
/*hide the span, works together with the script*/
span {
display: inline-block;
white-space: nowrap;
vertical-align: top;
overflow: hidden;
transition: all .5s;
}
/*get rid of the extra whitespace, use it as needed*/
span {
margin-right: -4px;
}
li:hover span {
margin-right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>
<span>FACEBOOK</span>FB
</li>
</ul>
Возможно ли, сделать, что-то подобное на чистом CSS, либо на JS, но без jQuery? Я пытался сделать на CSS с помощью display: none; и display: inline-block; но этот вариант невозможно анимировать и получается слишком просто. Ещё при появлении span, он сдвигает FB вправо. Как спрятать FB и показать только FACEBOOK?