2008年08月17日

a:hoverを使ってアンカーのスタイルをJavaScriptを利用せずスタイルシートだけで変更します

スポンサード リンク

疑似クラス a:hover を使うと
アンカーテキストにマウスが来たとき(onmouseover)にアンカーのスタイルを変更する
という動作を、JavaScriptを利用しなくてもスタイルシートだけで実行する事が出来ます。

スタイルの変更 CSSコード
文字の色を変える a:hover { color:lime; }
背景色の変更 a:hover { background-color:aqua; }
アンダーラインを付ける a{text-decoration:none;}
a:hover{text-decoration:underline;}
アンダーラインを消す a:hover { text-decoration:none; }
抹消線を付ける a:hover {text-decoration:line-through; }
文字の太さを変える a:hover { font-weight:bold; }
フォントスタイルを変える a:hover { font-family :MS P明朝; }
文字を斜体にする a:hover { font-style:italic; }
フォントサイズ a:hover { font-size : 18px; }
マウスカーソルの形状 a:hover { cursor: move; }
ボーダーをインセットで表示 a:hover { border: inset 10px #ff00ff; }
ボーダーの色,太さを変えます a{ border: solid 1px #ff00ff; }
a:hover { border: solid 2px #ff0000; }
アンカーテキストを動かします a:hover { position: relative;
top: 2px; left: 2px; }
隠れている文字を表示します <A href="javascript:void(0);" class="showf">隠れている文字を
<span>表示します</span></A>
a.showf span{ display:none; }
a.showf:hover span{ display:inline; }

<A href="javascript:void(0);" class="showf">隠れている文字を
<span>表示します</span></A>
は<BODY>部分に入れてください。

CSSコードは
<STYLE type="text/css">
<!--
**********
}
-->
</STYLE>
と書いて**********の部分に入れてください。

上のテーブルは Javascriptテーブルの行の背景色を一行おきに変えます。を使って
一行おきに塗り替えてます。

関連項目

a 要素にリンクの疑似クラスを指定して リンクの状態によって色を変更します。
a:link {color:blue;}      //未訪問のリンク
a:visited {color:#990000;}  //既にアクセスしたことのあるリンク
a:hover {color:#006633;}  //マウスが上に乗っているリンク
a:active {color:red;} //選択されている状態のリンク

color プロパティを使ってcolor : 文字色 ; で色を指定します。色に関しては
文字の色,背景色の 色の組み合わせのチェック
定義済みの色の名前16色、ウェブセーフカラー216色、 Netscape140色を参考にしてください。


posted by javaScript at 17:17 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。