使用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转换来显示数字中的更多数字

回答

相关问题