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

advertisements

I was wondering if anyone in SO would be kind enough to assist me. Using only CSS (most-likely CSS3), is there a way to change the inner HTML of a table cell while hovering over the element? I have a numerical table with 49 cells (7 rows by 7 columns), and I would like the number in the first cell of the first row to change from number 1 to number 50, but only when hovering over the number 1 (i.e. - changing back to number 1 when not hovering).

I can do this with a "change innerHTML" function in JavaScript, but only when using a portion of the script inline with my HTML within the body of the document. For various reasons, I cannot use any script or CSS inline, so this method of achieving my goal is not what I want to use (this goes beyond semantic reasons). I would really rather avoid using any script at all for this effect because I think CSS3 handles effects more elegantly and selectively than JavaScript (i.e. - CSS3 Tooltips are much nicer than any script-based Tooltip).

I was just wondering if someone knew how to do this using CSS3 (maybe with the z-index, display: none; or positioning techniques somehow?}. I've played around with it, but I can't seem to figure it out. I would use JavaScript if I didn't have to mix the script in with my Markup, but there doesn't appear to be a way to do that.

Anyone have ideas on how to go about this? Thank you for your time.

Update

@ramsesoriginal @hiphip

Thanks again. I answered "Yes" to the "Did this answer help you." I believe that is what you meant by "as accepted" ramsesoriginal; right? Thanks hiphip for your answer as well. I was playing around with styles like the code below, but it wasn't quite working out in the table cell the way I had hoped (works nice with isolated images by the way). I think I'll keep working on it though; the more options, the better.

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


There are two ways, but both require some additional markup:

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

with the styling

 #example1 .hover{
     display:none;
 }

 #example1 .nohower{
     display:block;
 }

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

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

or

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

with the styling

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

You can view a working demo here: http://jsfiddle.net/ramsesoriginal/W8LQq/