我想知道 SO 中是否有人愿意帮助我。仅使用 CSS(最有可能是 CSS3),有没有办法在将鼠标悬停在元素上时更改表格单元格的内部 HTML?我有一个包含 49 个单元格(7 行 x 7 列)的数值表,我希望第一行第一个单元格中的数字从数字 1 变为数字 50,但只有当鼠标悬停在数字 1 上时(即 -不悬停时变回数字 1)。
我可以使用 JavaScript 中的“change innerHTML”函数来执行此操作,但前提是在文档正文中使用与我的 HTML 内联的脚本的一部分。由于各种原因,我不能使用任何脚本或 CSS 内联,所以这种实现我的目标的方法不是我想要使用的(这超出了语义原因)。我真的宁愿完全避免使用任何脚本来实现这种效果,因为我认为 CSS3 比 JavaScript 更优雅、更有选择地处理效果(即 - CSS3 工具提示比任何基于脚本的工具提示都要好得多)。
我只是想知道是否有人知道如何使用 CSS3(可能使用 z-index、display: none;或以某种方式定位技术?}。我玩过它,但我似乎做不到搞清楚。如果我不必将脚本与我的标记混合,我会使用 JavaScript,但似乎没有办法做到这一点。
有人知道如何解决这个问题吗?感谢您的宝贵时间。
更新
@ramsesoriginal @嘻嘻
再次感谢。我对“这个回答对您有帮助吗?”回答"is",我相信这就是您所说的“已接受”正确的?也感谢 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;
}
最佳答案
有两种方法,但都需要一些额外的标记:
<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/
关于javascript - 如何在仅使用 CSS3 悬停时更改表格单元格的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9174045/