使用CSS轉換來顯示數字中的更多數字

在HTML中，我們有一個數字，如12.34當某人將鼠標懸停在它上面時，我希望它通過某種過渡擴展以顯示更多有效數字，例如12.345678。使用CSS轉換來顯示數字中的更多數字

這只是可能的CSS和最簡單的方法是什麼？（例如我可能不希望使用固定寬度的div與溢出隱藏，然後擴大，因爲寬度可能是可變的數字如123.45，1,234.56等）所以我想有兩個div一個圓形，一個與所有的數字 - 但是然後我們需要一些方法來平滑地在它們之間轉換。謝謝！

來源

2013-02-24 Brian Armstrong

CSS筆/格式化..如果你想動態改變一個字符串，那麼你需要的JavaScript。 – 2013-02-24 20:33:28

我同意馬克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

非常聰明，交換'位置：相對'和'位置：絕對'！花了一段時間才明白髮生了什麼:)然而，對隱式寬度進行動畫製作並不會產生任何效果。 – 2013-02-24 21:49:26

是的，除非設置爲不同於'auto'的寬度，否則寬度不會生成動畫。如果我想到一個解決方案，我會發佈一個解決方案，但現在恐怕沒有一個解決方案可以讓寬度生成。（在發佈的代碼下查看我的評論） – 2013-02-24 21:53:33

非常聰明，沒有JS的令人印象深刻的解決方案。謝謝克里斯！ – 2013-02-25 23:37:28

由於某種原因，我無法讓透明轉換在我們身邊乾淨地工作。但是，這是在情況下，更簡單的版本，它可以幫助別人：（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轉換來顯示數字中的更多數字

回答

相關問題