Как изменить текст ячейки таблицы при наведении курсора, используя только CSS3

Question

Мне было интересно, если кто-то в SO будет достаточно любезен, чтобы помочь мне. Используя только CSS (наиболее вероятный CSS3), есть ли способ изменить внутренний HTML ячейки таблицы при наведении на элемент? У меня есть числовая таблица с 49 ячейками (7 строк на 7 столбцов), и я хотел бы, чтобы число в первой ячейке первой строки изменялось с номера 1 на число 50, но только при наведении курсора на число 1 (т.е. переходя обратно на номер 1, когда не зависать).

Я могу сделать это с помощью функции «change innerHTML» в JavaScript, но только при использовании части скрипта, встроенного в мой HTML-код в теле документа. По разным причинам я не могу использовать какой-либо скрипт или встроенный CSS, поэтому этот метод достижения моей цели не тот, который я хочу использовать (это выходит за рамки семантических причин). Я действительно предпочел бы вообще избегать использования какого-либо сценария для этого эффекта, потому что я думаю, что CSS3 обрабатывает эффекты более элегантно и избирательно, чем JavaScript (т.е. подсказки CSS3 намного приятнее, чем любая подсказка на основе сценариев).

Мне было просто интересно, знает ли кто-нибудь, как это сделать, используя CSS3 (может быть, с z-index, display: none; или с методами позиционирования как-то?}. Я поиграл с этим, но, похоже, не могу понять это. Я бы использовал 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/

Answer 2

Нет способа сделать это только с помощью CSS

Answer 3

Это невозможно.

CSS используется только для стилизации HTML.У него нет доступа к атрибутам самого HTML.

Answer 4

С позиционированием:

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