最新のInternet Explorer、Firefox、Opera、Google Chromeでご覧ください。
htmlやCSSに関してあれこれ。
掲載している情報はご自由にお使いください。
トップページ>ホーバーの色々
ホバーの色々
マウスが乗ったら、文字と背景の色が変わり、アンダーラインが消えます。
HTML部分
<p id="hover1"><a href="hover.php">マウスが乗ったら、文字と背景の色が変わり、
アンダーラインが消えます。</a></p>CSS部分
#hover1 a:link { color:0000ff; text-decoration: underline; }
#hover1 a:visited { color:0000ff; text-decoration: underline; }
#hover1 a:hover { color:white ; text-decoration: none; background-color: black; }
#hover1 a:active { color:0000ff; text-decoration: none; }
説明
link、visited、hover、activeの順番は変えないでください。
リンク画像にマウスが乗ったら、半透明に変化します。
HTML部分
<p id="hover2"><a href="hover.php"><img src="/image/gazo.gif" alt="画像"></a></p>CSS部分
#hover2 a:hover img { opacity: 0.7;filter: alpha(opacity=70); -moz-opacity: 0.70; }リンク画像にマウスが乗ったら、枠線を表示します。
HTML部分
<p id="hover3"><a href="hover.php"><img src="/image/gazo2.gif" alt="画像"></a></p>CSS部分
#hover3 a img { border: 1px solid white; }
#hover3 a:hover img { border: 1px solid black; }リンク画像にマウスが乗ったら、動きます。
HTML部分
<p id="hover4"><a href="hover.php"><img src="/image/gazo3.gif" alt="画像"></a></p>CSS部分
#hover4 a:hover img {
position: relative;
bottom: 5px;
right: 5px;
}説明
他にtopとかleftとか指定します。
 JavaScript本格入門 |
 独習PHP第2版 |
 PHPライブラリコレクション |
 【送料無料】CSS＋HTML Webレイアウトsecondすぐに使えるアートワーク |
 【送料無料】プロクリエイターの作例に学ぶXHTML＋CSS達人テクニック |
