Использование переходов CSS для отображения большего числа цифр в номере

В HTML у нас есть номер, например 12.34 Когда кто-то наводит курсор мыши на него, я хотел бы, чтобы он расширялся с каким-то переходом, чтобы показать дополнительные значащие цифры, например 12.345678.Использование переходов CSS для отображения большего числа цифр в номере

Возможно ли это только с помощью CSS и каким будет самый простой способ? (например, я, вероятно, не хочу использовать фиксированную ширину div с переполнением скрытой, которая затем расширяется, потому что ширина может быть переменной с номерами, такими как 123.45, 1,234.56 и т. д.). Поэтому я думаю, что у нас есть два divs, один с все цифры - но тогда нам понадобится какой-то способ перехода между ними плавно. Благодаря!

источник

2013-02-24 Brian Armstrong

CSS имеет дело только с презентацией/форматированием .. если вы хотите, чтобы динамически изменять строку, то вам нужно JavaScript. –

Я согласен с Marc B - существует слишком много возможных вариантов определения положения точки, чтобы использовать только одно поле, не прибегая к использованию JS. Однако это мое решение, с двумя полями

http://jsfiddle.net/chrisdanek/mSjsj/1/

<span class="num"> 
    <span class="abbr">123.45</span> 
    <span class="full">123.4567</span> 
</span> 

<span class="num"> 
    <span class="abbr">123,345,567.45</span> 
    <span class="full">123,345,567.45000</span> 
</span> 

<span class="num"> 
    <span class="abbr">123,345,567.455634434</span> 
    <span class="full">short one</span> 
</span><!-- this one is not possible with numbers, but just to show how it works with shorter second number -->

И CSS

.num { 
    position: relative; 
    display: inline-block; 
    padding: 5px; 
    border: 1px solid red; 
    -webkit-transition: width 0.2s; 
    -moz-transition: width 0.2s; 
    -o-transition: width 0.2s; 
    transition: width 0.2s;  
} 
.abbr { 
    position: relative; 
    top: 0; 
    left: 0; 
    display: block; 
    opacity: 1; 
    z-index: 1; 
    -webkit-transition: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 
.full { 
    top: 5px; left: 5px; 
    position: absolute; 
    display: block; 
    z-index: 0; 
    opacity: 0; 
    -webkit-transition: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
    color: red; 
} 
.num:hover .abbr { position: absolute; top: 5px; left: 5px; opacity: 0; z-index: 0; } 
.num:hover .full { position: relative; top: 0; left: 0; opacity: 1; z-index: 1; }

Лучшее, что я мог придумать, это изменить непрозрачность, так как она не требует установки ширины на контейнер. Без этого невозможно сделать переход для ширины (вы заметите, что добавлен код перехода, но он не выполняется). Возможно, кто-то другой может придумать обходной путь.

источник

2013-02-24 21:00:17

Очень умный, заменяющий 'position: relative' и' position: absolute'! Потребовалось время, чтобы понять, что происходит :) Анимация неявной ширины, похоже, не имеет никакого эффекта. –

Да, ширина не будет анимирована, если она не установлена на что-то другое, чем 'auto'. Я отправлю решение, если я подумаю об одном, но сейчас я боюсь, что нет такого, который позволил бы сделать анимацию ширины. (проверьте мой комментарий из ответа по размещенному коду) –

Довольно умное и впечатляющее решение без JS. Спасибо Крису! –

Я не мог заставить переходы непрозрачности работать на нашей стороне по какой-то причине. Но это гораздо более простой вариант в случае, если это помогает кому-то: (в SASS)

.num { 
    display: inline-block; 
    .abbr { display: block; } 
    .full { display: none; } 

    &:hover { 
    .abbr { display: none; } 
    .full { display: block; } 
    } 
}

источник

2013-07-18 07:00:59

Использование переходов CSS для отображения большего числа цифр в номере

ответ

Смежные вопросы