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

我想知道是否有人愿意帮助我。只使用CSS（最有可能是CSS3），有没有办法在悬停在元素上时更改表单元格的内部HTML？我有一个数字表，有49个单元格，7行7列，我希望第一行的第一个单元格中的数字从数字1变为数字50，但仅当鼠标悬停在数字1上时，即-不悬停时变回数字1

我可以通过JavaScript中的ChangeInnerHTML函数来实现这一点，但只有在文档体中使用与我的HTML内联的部分脚本时。由于各种原因，我不能使用任何脚本或CSS内联，因此实现我的目标的方法不是我想要使用的，这超出了语义原因。我真的宁愿避免使用任何脚本来实现这种效果，因为我认为CSS3比JavaScript更优雅、更有选择性地处理效果，也就是说，CSS3工具提示比任何基于脚本的工具提示都要好得多

我只是想知道是否有人知道如何使用CSS3实现这一点，可能是使用z-index，display:none；还是定位技术。我一直在玩弄它，但我似乎弄不明白。如果我不必将脚本与标记混合在一起，我会使用JavaScript，但似乎没有办法做到这一点

有人知道怎么做吗？谢谢你抽出时间

更新

@拉姆塞斯原著 @时髦的

再次感谢。我对这个问题的答案是肯定的。这个答案对你有帮助吗。我相信这就是你所说的被接受为原创的意思；正当谢谢你的回答。我在玩弄下面的代码之类的样式，但在表格单元格中的效果并不像我希望的那样，对孤立的图像效果很好。我想我会继续努力的；选择越多越好

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

这是不可能的

CSS仅用于设置HTML的样式。它无法访问HTML本身的属性。

这是不可能的

---

CSS仅用于设置HTML的样式。它无法访问HTML本身的属性。

仅使用CSS无法做到这一点。

仅使用CSS无法做到这一点有两种方法，但都需要一些额外的标记：

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

或

---

您可以在此处查看工作演示：

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

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

或

您可以在此处查看工作演示：

带定位：

<style>
    #outterdiv {
        position: relative;
        width:20px;
        height:20px;
        overflow:hidden;
        border: 1px blue solid;
    }
    #innerdiv:hover {
        width:20px;
        height:20px;
        position: absolute;
        top: -20px;
    }
</style>

<div id="outterdiv">
    <div id="innerdiv">
        <div>1</div>
        <div>50</div>
    </div>
</div>

定位：

<style>
    #outterdiv {
        position: relative;
        width:20px;
        height:20px;
        overflow:hidden;
        border: 1px blue solid;
    }
    #innerdiv:hover {
        width:20px;
        height:20px;
        position: absolute;
        top: -20px;
    }
</style>

<div id="outterdiv">
    <div id="innerdiv">
        <div>1</div>
        <div>50</div>
    </div>
</div>

---

哈哈。非常感谢你。我就知道！我在正确的轨道上，但我没有时间坚持到底。当我在玩CSS3工具提示上的一个变体时，我已经接近了。我创建了两个并排放置的div，使用z索引、相对和绝对定位以及过渡属性，但我无法让它们完全按照我的要求进行操作。非常感谢。非常感谢，哈哈。非常感谢你。我就知道！我在正确的轨道上，但我没有时间坚持到底。当我在玩CSS3工具提示上的一个变体时，我已经接近了。我创建了两个并排放置的div，使用z索引、相对和绝对定位以及过渡属性，但我无法让它们完全按照我的要求进行操作。非常感谢。真的很感激。我的意思是投票按钮下面应该有一个勾号。如果您单击它，问题将被标记为已回答，请参见。还有你的例子：你能提供HTMLTO，或者更好的例子吗？我的意思是投票按钮下面应该有一个勾号。如果您单击它，问题将被标记为已回答，请参见。对于你的例子：你能提供HTMLTO，或者更好的例子吗？你可以在单元格中创建一些与背景颜色相同的、因此不可见的替代文本。当您将鼠标悬停在单元格上方时，更改背景颜色，文本将变为可见。您可以在单元格中创建一些与背景颜色相同但不可见的替换文本。当您将鼠标悬停在其上时，请更改背景颜色，文本将变为可见。

<style>
    #outterdiv {
        position: relative;
        width:20px;
        height:20px;
        overflow:hidden;
        border: 1px blue solid;
    }
    #innerdiv:hover {
        width:20px;
        height:20px;
        position: absolute;
        top: -20px;
    }
</style>

<div id="outterdiv">
    <div id="innerdiv">
        <div>1</div>
        <div>50</div>
    </div>
</div>