マウス１

***　マウス1　***

今日は、通常<head>内に入れる『A:hover』を回避するタグを紹介します。
『hover』は、「マウスを重ねると…」という指定をするのですが、
楽天広場では　あらかじめ『基本デザイン』のページで指定されていますので、
個別に変更できないようになっています。
とりあえず、これを回避できるタグを紹介していきたいと思います♪

*-*-*マウスを重ねて文字色を変える*-*-*-

↓ココで使うタグはコレ

<a href=" http://～ " style=" color: ★１ ; text-decoration:none ;"
onMouseOver=style.color=" ☆ " onMouseOut=style.color=" ★２ " target="_blank" >
ここに文字
</a>

☆ …マウスを重ねた時の色
★ …マウスを重ねない時の色（ ★１は初期時）

http://～

リンク先のURL

text-decoration:none

下線の有無（ナシ）

target="_blank"

新しいウィンドウで開く

わかりやすいように、 ★１と ★２に色は　別の色にして見てみましょう。
初期状態は緑（#009966）・マウスを重ねるとピンク（#FF69B4）・一度重ねた後は青（#0000CC）です。

ここに文字

*-*-*マウスを重ねて文字色を変える（背景色あり）*-*-*

次に、この背景に色を入れます。
これは　以前やりましたね？　そう！『font』の背景「 background-color 」です。
では、このスタイルをココへ追加してみましょう♪

<a href="http://～" style=" background-color : ■ ; color: ★１ ; text-decoration:none;"
onMouseOver=style.color=" ☆ " onMouseOut=style.color=" ★２ " target="_blank" >
ここに文字
</a>

同じく　 ★1・2 を別々に指定し、
この ■ にアクアブルー（#F0F8FF）を入れて見てみると…

ここに文字

…このようになります。

*-*-*マウスを重ねて背景色を変える*-*-*

では、次に　この背景色を変えてみましょう。
ここで使うタグはコレ↓

<a href="http://～" style="background-color: ■１ ; color:★; text-decoration:none;"
onMouseOver=style. background =" △ " onMouseOut=style. background =" ■２ " target="_blank">
ここに文字
</a>

■１は始めに表示される背景色（初期状態）
△ はマウスを重ねた時の背景色
■２はマウスを重ねた後の背景色

分りやすいように、 ■１と ■２の色を変えて見てみましょう…。

ここに文字

こんな感じになります。

最後に、リンクタグ（a）で説明しましたが、リンク先がない場合、
つまり　リンクを張らない時には、
『font』・『/font』もしくは『p』・『/p』に変更してもOKです。

ココから、『a』の所に『font』を入れて書いています。（なぞりながら読んでみてね♪）
リンクではないので、 URLを指定する『href="http://～"』『text-decoration:none』』と、
『target="_blank"』も抜いています。

初期状態の色は無色にする為、追加した『background-color:■』を抜いています。
これはちょっと手間を掛けていますが…(^_^;)
少しずつ色を変えてみたりしちゃったりして｡｡｡　 (￣∇￣*)ゞ

ジャンル別一覧