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

How to change the text of a table cell while hovering using only CSS3

本文关键字：表格 单元格 文本 CSS3 悬停      更新时间：2023-09-26

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

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

我只是想知道是否有人知道如何使用CSS3（可能使用z索引、显示：无；或者以某种方式定位技术？）来实现这一点。我试过它，但我似乎搞不清楚。如果不必将脚本与Markup混合在一起，我会使用JavaScript，但似乎没有办法做到。

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

更新

@原始的@hiphip

再次感谢。我对的回答是"这个答案对你有帮助吗？"我相信这就是你所说的"被接受"ramesooriginal的意思；正确的感谢嘻哈的回答。我一直在玩下面代码这样的风格，但它在表格单元格中并没有像我希望的那样运行（顺便说一句，对孤立的图像很好）。不过我想我会继续努力；选择越多越好。

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

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

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

这是不可能的。

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

只有CSS 无法做到这一点

带定位：

<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>
相关文章：