tips_textchange

Tips：CSSで表示テキストを切り替える

何の役に立つのかまったくもって不明ですが、CSSだけでできます。
動作可能環境：IE6以上、Firefox、Opera。試していませんがChrome、Safariも動くと思います。
つまりほぼ全てのPCブラウザで動作します。
スマホはそもそも「ロールオーバー」というのがないっぽいので、動かすことができません。（iPhoneではタップ直後、ページ移動する前の一瞬だけ表示されるかも）

サンプル
（Firefox,Chrome,Safari,Operaで見ると無駄にボタンっぽくなっています）

りんごapple みかんorange ももpeach

解説っぽいもの…
特に難しいことをしているわけではなく、display:none と display:inlineを切り替えているだけ。
横に並べたときに文字数によって隣がずれるので、幅を指定したブロックをfloatなどで並べた方が綺麗です。
そして、テキストの長さによってクリックできる領域が違うので、長いテキスト→短いテキストと表示すると右端にカーソルを乗せた時クリックできなくなります。
ですのでリンク（a要素）をブロックレベルにしておくと良いと思います。

CSSを無効にするとテキストが両方表示されてしまうのが弱点。
PCでしか動かないものなので、ナノでこれを使ってページを作るとしたら、どちらかのテキストをpc_onlyで囲っておくと良いのではないかなと思います（ドコモ対策）。

ソースはこちら

HTML

<div class="textchange">
 <a href="#">りんごapple</a>
 <a href="#">みかんorange</a>
 <a href="#">ももpeach</a>
</div>

CSS

.text2 {
  display:none;
}

a:hover span.text1 {
  display:none;
}
a:hover span.text2 {
  display:inline;
}

/* -- ↓ 装飾用 -- */
.textchange a {
  display:block;
  float:left;
  margin:0.2em;
  padding:0.5em 0;
  width:6em;
  box-shadow:2px 2px 2px #cccccc;
  border:1px solid #003355;
  border-radius:1.2em;
  background:-moz-linear-gradient(top, #ccddff, #6688bb);
  background:-webkit-linear-gradient(top, #ccddff, #6688bb);
  background:-o-linear-gradient(top, #ccddff, #6688bb);
  background:linear-gradient(top, #ccddff, #6688bb);
  text-align:center;
  text-shadow:1px 1px 0 #ccddee;
  color:#003355;
}

.textchange a:hover {
  margin:0.2em;
  padding:0.5em 0;
  border:1px solid #666666;
  background:-moz-linear-gradient(top, #f8f8f8, #aaaaaa);
  background:-webkit-linear-gradient(top, #f8f8f8, #aaaaaa);
  background:-o-linear-gradient(top, #f8f8f8, #aaaaaa);
  background:linear-gradient(top, #f8f8f8, #aaaaaa);
  text-shadow:1px 1px 0 #ffffff;
  color:#000000;
}

装飾のところがなんかすごい多いですね。グラデーションのせいですけど。
a:hoverにもmarginとpaddingの指定があるのは、IE6と7で指定がないと0になってしまうことがある…ような気がしたからです。
floatしてますので、clearを忘れずに（このページはhrでクリアしています）。

HONEY CANDY

Tips：CSSで表示テキストを切り替える