ポインタがリンクの上に乗るとリンク色が変わる、スタイルシートで変更する方法  http://what.toriichi3.com/zatugaku3.html


Toriichi3のひぽぽたますが逆立ち調べてみるとこんな意味その3

酉一マーク ポインタがリンクの上に乗るとリンク色が変わる方法・2
   スタイルシートを変更する方法

今度は、ポインタがリンクの上に乗るとリンク色が変わる設定の方法です。


テキストリンクの下線を消したのはいいが、テキストとテキストリンクの差が
わかりずらくなってしまった。   ・・・うぅ~ん?

見た目差がなく・・・ポインタがテキストリンクの上に行った時だけ、
ポインタ表示が、 ← から  に変わるだけになって、
いまいちわかりずらいので、テキストリンクの上にポインタがいったら
テキストリンクの色が変化するようにしてみた。


教えてGooにありましたので、コレを参照させてもらいました。



  ”スタイルシートを変更する方法です”


HTML をテキストエディタで開き、

<head>~</head> 内に、


下記① の

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:none; }
</style>

を入れて、好きな色に変更してください。


① 文字の色だけを変えたいとき
     a:hover { color:pink; text-decoration:none; } 

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:none; }
</style>


その他文字の色と一緒に、
下記の②~⑤の設定を変更したい場合、別途各番号の

<style type="text/css">
 ~
 ~
 </style>

を入れて変更してください。


② 背景色を変えたいとき  (5行目を変更する)
    a:hover { background-color:yellow; color:black; text-decoration:none; }

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { background-color:yellow; color:black; text-decoration:none; }
</style>


③ 太字にしたいとき  (5行目を変更する)
    a:hover { yellow; color:black; font-weight:bold; text-decoration:none; } 

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { yellow; color:black; font-weight:bold; text-decoration:none; }
</style>


④ 文字に下線を入れたいとき  (5行目を変更する)
    a:hover { color:pink; text-decoration:underline; } 

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:underline; }
</style>


➄ 文字の上下にラインを入れたいとき  (5行目を変更する)
      a:hover { color:pink; text-decoration:underline overline; } 

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:underline overline; }
</style>


工夫すれば他にも色々できますよ。


ちなみに、

a:link :リンクの標準の状態。  (クリックしたことがなく、マウスが乗ってない状態)
a:visited :クリックしたことがあるリンクの状態。
a:active :フォーカスがあたっているか、クリックしているときの状態。
a:hover :リンクにカーソルが載っているときの状態です。



ポインタがリンクの上に乗るとリンク色が変わる設定
 「ホームページビルダーでの設定方法」


「ホームページビルダーでテキスト・テキストリンク・背景などの設定をする」


「ホームページビルダーのテキストリンクの下線をまとめて消す方法」


その2 > 前のページへ | 次のページへ < その4






Toriichi3のバカ調べてみるとこんな意味だったその3
   Toriichi3動画再生リスト
石油ファンヒーターを掃除する!
ロープの縛り方(よろい・トラッカーズヒッチ)
秩父札所自転車ツーリング・2
ムカデが足の指の間に・・・あなたならどうする?
札所31番巡礼と初体験!サイクルトレイン
ネコはやっぱり魚が好きだった
電撃殺虫ラケットの電撃をあびる・・・(絶叫シーン)
リリースした50㎝バスをさらに襲うバス達
32番札所 天空の大日如来
ネコとねずみの喧嘩を仲裁した! 腹いせに咬まれて出血!!
ザリガニの釣り方! バケツ3杯も釣れちゃった
ルアー VS みみず 40㎝オーバー源流イワナを釣上げた
超希少映像! 三条滝下を釣る、その川原から滝を見た映像!!





【送料無料】【SIMフリー】タブレット Google Nexus7-32G-LTE(2013モデル) LTE ASUS エイスース ME571-32G-LTE MeMO Pad Android アンドロイド 16GB ブラック 7インチ リファービッシュ タブレットPC【中古】

価格:38,880円
(2015/12/5 12:58時点)
感想(110件)














BUFFALO USB3.0 外付けハードディスク PC/家電対応 4TB HD-LC4.0U3/N [フラストレーションフリーパッケージ(FFP)]

新品価格
¥17,073から
(2015/4/24 04:52時点)


エッ?こんなに薄くて軽いのに!?
10秒で衝撃の暖かさ!
充電式電熱ヒーター付きベスト
「ぬくさに首ったけ」



歯周病予防に最適!お風呂で簡単♪
歯間ジェットクリーナー
 


プラレール E7系北陸新幹線かがやき 立体レールセット

新品価格
¥4,083から
(2015/4/24 04:58時点)

世界初の動体視力トレーニングメガネ
『プライマリー』


【PM2.5対応】SHARP プラズマクラスター搭載 加湿空気清浄機 13畳まで ブラック系 KC-D50B

新品価格
¥20,800から
(2015/4/24 05:17時点)




「お名前.com プレミアムドメイン」
ビジネスの成功は価値あるドメインから


☆★楽天カード新規入会キャンペーン★☆
「年会費無料!
新規入会でもれなく
楽天スーパーポイントがもらえる」

送料無料の情報が満載!
ネットで買うなら楽天市場

ネットで注文!お店で安心受取り
カメラのキタムラネットショップ


コンタクトレンズ 
全国最安値に挑戦中!【アットレンズ】