0

在 HTML 中，我们有一个数字，例如12.34当有人将鼠标悬停在它上面时，我希望它通过某种过渡来扩展以显示其他有效数字，例如12.345678.

仅使用 CSS 是否可行，最简单的方法是什么？（例如，我可能不想使用隐藏溢出的固定宽度 div，然后扩展，因为宽度可以随数字等变化123.45。1,234.56）所以我想有两个 div 一个四舍五入，一个所有数字- 但是我们需要一些方法来在它们之间顺利过渡。谢谢！

4

2 回答 2

2

我同意 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-24T21:00:17.583 回答
0

由于某种原因，我无法让不透明度过渡在我们这边干净利落地工作。但这是一个更简单的版本，以防它帮助某人：（在 SASS 中）

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

  &:hover {
    .abbr { display: none; }
    .full { display: block; }
  }
}
于 2013-07-18T07:00:59.480 回答