如何在仅使用CSS3悬停时更改表格单元格的文本

Question

我想知道是否有人能够帮助我.仅使用CSS(最可能是CSS3),是否有办法在将鼠标悬停在元素上时更改表格单元格的内部HTML？我有一个包含49个单元格(7行乘7列)的数字表,我希望第一行的第一个单元格中的数字从数字1更改为数字50,但只有当悬停在数字1上时(即 - 不悬停时改回1号).

我可以在JavaScript中使用"更改innerHTML"函数来执行此操作,但仅限于在文档正文中使用与HTML内联的脚本部分时.由于各种原因,我不能使用任何脚本或CSS内联,所以这种实现我的目标的方法不是我想要使用的(这超出了语义原因).我真的宁愿完全避免使用任何脚本来实现这种效果,因为我认为CSS3比JavaScript更优雅和有选择地处理效果(即 - CSS3工具提示比任何基于脚本的Tooltip都好得多).

我只是想知道是否有人知道如何使用CSS3(可能使用z-index,display:none;或定位技术以某种方式？}.我已经玩过它,但我似乎无法弄明白如果我不需要将脚本与我的Markup混合使用,我会使用JavaScript,但似乎没有办法做到这一点.

任何人都有关于如何解决这个问题的想法？感谢您的时间.

更新

@ramsesoriginal @hiphip

再次感谢.我对"这个答案对你有帮助吗"回答"是" . 我相信这就是你所说的"被接受的" ramsesoriginal ; 对？感谢hiphip你的答案为好.我正在玩类似下面代码的样式,但它并没有像我希望的那样在表格单元格中工作(顺便说一下,对于孤立的图像效果很好).我想我会继续努力; 选择越多越好.

div.up {
   margin: 10px 0;
   position: relative;
   width: 40px;
   height: 40px;
   border: 1px solid rgb(170, 169, 169);
   overflow: hidden;
}   

div.up div {
   width: 40px;
   height: 40px;
   font-size: 13px;
   padding: 10px;
   position: absolute;
   top: 0;
   left: 0;
   text-align: center;
   background: rgba(255, 255, 255, 1.000);
  -moz-transition: left 1s linear;
  -webkit-transition: left 1s linear;
  -o-transition: left 1s linear;
  transition: left 1s linear;
}

div.up div.one {
   z-index: 999;
}       

div.up:hover div.one {
     -webkit-transition: left 1s linear;
     -moz-transition: left 1s linear;
     -o-transition: left 1s linear;
     transition: left 1s linear;
     left: -99px;
}

Answer 1

有两种方法,但都需要一些额外的标记:

<td id="example1" class="hoverer"><span class="nohower">1</span><span class="hover">50</span></td>

与造型

 #example1 .hover{
     display:none;
 }

 #example1 .nohower{
     display:block;
 }

 #example1:hover .hover{
     display:block;
 }

 #example1:hover .nohower{
     display:none;
 }

要么

<td id="example2" class="hoverer"><span data-hover="50">1</span></td>

与造型

 #example2:hover span:after{
     content:attr(data-hover);
 }
 #example2:hover span{
     width:1px;
     margin-left: -0.5em;/* adjust accoridng to font*/
 }

您可以在此处查看工作演示:http://jsfiddle.net/ramsesoriginal/W8LQq/