| ポイント |
<![CDATA[
a:hover { color:green; }
]]>
|
| 説 明 |
マウスがリンク文字上に乗ったら上線を表示するには:hover擬似プロパティとtext-decorationプロパティを使います。スタイルの定義部分でa:hover { text-decoration:overline; }のようにします。また、最初に下線を表示しないようにa { text-decoration:none; }も定義しておきます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスがリンク文字上に乗ったら上線を表示する</title>
</head>
<body>
<a href="/index.cgi/contrast/http://www.google.com/">Google</a> <br>
<a href="/index.cgi/contrast/http://www.yahoo.co.jp">Yahoo</a> <br>
<a href="/index.cgi/contrast/http://www.openspc2.org">OpenSpace</a> <br>
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="http://www.openspc2.org/reibun/css/link/005/index.html">(->オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="http://www.openspc2.org/reibun/css/link/005/index.html" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■しかくサンプルを実行する >>実行
■しかく各ブラウザでの動作結果を見る >>View! |