0

HTML では、12.34「誰かがマウスをその上に置いたときに、何らかのトランジションで展開して、追加の有効数字を表示したい」のような数字があります12.345678。

これはCSSだけで可能で、最も簡単な方法は何ですか? （たとえば、オーバーフローが隠されている固定幅のdivを使用したくないと思われます。これは、幅がなど123.45の数値で可変になる可能性があるため1,234.56です。） -しかし、それらの間をスムーズに移行するための何らかの方法が必要になります. ありがとう！

4

2 に答える 2

2

I agree with Marc B - there are too many possible variations to determine the dot position to use just one field without resorting to using JS. However this is my solution, with two fields

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

And 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; }

The best I could come up with is opacity change, as it doesn’t require setting width on the container. Without that it’s impossible to make a transition for width (you’ll notice transition code is added, but it’s not being executed). Perhaps someone else can come up with a workaround.

于 2013-02-24T21:00:17.583 に答える