CSS3のみを使用してホバリングしているときにテーブルセルのテキストを変更する方法

Question

SOの誰かが私を助けるほど親切であるかどうか疑問に思っていました。 CSS（ほとんどの場合はCSS3）を使用するだけで、要素の上にカーソルを置いたまま、表のセルの内部HTMLを変更する方法はありますか？私は49セル（7列×7列）の数値表を持っています。そして、最初の行の最初のセルの番号を1から50に変更したいのですが、番号1（つまり - ホバリングしないときは番号1に戻ります）。

私は、JavaScriptの "change innerHTML"関数を使ってこれを行うことができますが、ドキュメント本体の中で自分のHTMLにインラインでスクリプトの一部を使用する場合にのみ可能です。さまざまな理由から、スクリプトやCSSをインラインで使用することはできないため、私の目標を達成するこの方法は、私が使いたいものではありません（これは意味的な理由を超えています）。私は、CSS3がJavaScriptよりも優雅にかつ選択的に効果を扱うと考えているため（つまり、CSS3のツールチップはどのスクリプトベースのツールチップよりも優れています）、このエフェクトのためにスクリプトを使用するのは本当に避けています。

私は誰かがCSS3を使ってこれを行う方法を知っていたかどうかは疑問でした（多分z-インデックス、display：none、または何らかの位置付け技術？）。スクリプトをMarkupに組み込む必要がない場合は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

これはできません。

CSSはHTMLのスタイリングにのみ使用されます。 HTML自体の属性にアクセスすることはできません。

Answer 2

だけCSSでこれを行うには方法

Answer 3

あり、2つの方法がありますが、両方は、いくつかの追加のマークアップが必要です。

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