- ベストアンサー
CSS：リンクにカーソルを合わせたときに文字の色が変わらない
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
関係ないかもしれませんが、a要素の疑似クラスは順番通りに書かないとブラウザによっては反映されないことがあります。 順番 a:link{ } a:visited{ } a:hover{ } a:active{ } 例えばa:hoverがa:visitedの前に来たり、順番が前後してないか注意。
その他の回答 (2)
再現してみましたが、きちんと「下線は無く文字は赤」で表示されますね。 他に何かCSSを記述されていませんか？
お礼
回答ありがとうございます。 どうやら記述の順番に問題があったようです。 最初は、 1.a:link 2.a:hover 3.a:visited の順番で記述してうまくいきませんでした。 それを、 1.a:link 2.a:visited 3.a:hover の順番に直したところ文字が赤くすることができました。 ありがとうございました。
- gizmo_s
- ベストアンサー率50% (3/6)
記述は間違っていませんし、 問題なく赤色で、下線も消えます。 正しくCSSがページにリンクされていないのでは？ ヘッダー情報はどのように指定してあるのでしょうか？
お礼
回答ありがとうございます。 どうやら記述の順番に問題があったようです。 最初は、 1.a:link 2.a:hover 3.a:visited の順番で記述してうまくいきませんでした。 それを、 1.a:link 2.a:visited 3.a:hover の順番に直したところ文字が赤くすることができました。 ありがとうございました。
補足
回答ありがとうございます。 <head>の間には、 <link rel="stylesheet" href="Link.css" type="text/css" /> と記述しています。読み込むスタイルシートは「Link.css」で合ってるはずなんですが…。
関連するQ&A
- CSSについて
カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか？ リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>
- ベストアンサー
- HTML
- CSSの優先順位
CSSを一部適用しない部分を設定したいのですが方法が分かりません。 もしかすると、私のやりたいことはCSSの順位付けかもしれません。 ▼基本▼ a:link {color:赤;text-decoration:none;} a:visited {color:青;text-decoration:none;} a:hover {color:黄;text-decoration:none;} a:active {color:緑;text-decoration:none;} ▲基本▲ 一方、下記のテキストには上記CSSの効果はいらないです。ここのテキストはリンクを貼っても文字の色（基本色：黒）を変化させず、下線もつけたくありません。 <td style="border:1px solid gray;" onmouseover="this.style.backgroundColor=紫" onmouseout="this.style.backgroundColor=白">ホーム</td> 「基本」を記述をすると、もちろんリンクをつけたすべてのテキストに適用されてしまいます。 しかし「基本」を一部適用したくない場所に不適用とすると下線とかも勝手につきますよね。 2番目に優先させるものとして↓を記述すべきですか？ a:link {color:黒;text-decoration:none;} a:visited {color:黒;text-decoration:none;} a:hover {color:黒;text-decoration:none;} a:active {color:黒;text-decoration:none;} そもそも優先順位のつけかたが分からないのですが…。 色々考えましたが、何をすべきか分かりません。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- fc2ブログでリンクテキストの色が設定できない
テンプレート名 Penetration です。テキストリンクの色を変更するためにcssを編集しましたが、記事内のテキストリンクに反映されません。 変更箇所は↓ /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #8bc9d7; text-decoration: none; } a:visited { color: #8bc9d7; } a:focus, a:hover { text-decoration: none; } a:active { } ↑上記箇所を、 /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #6699FF; text-decoration: none; } a:visited { color: #6699FF; text-decoration: none; } a:focus, a:hover { color: #FF9900; text-decoration: none; } a:active { } ↑に書き換えました。 記事タイトル・カレンダー・カテゴリ・コメント・トラックバックは希望通り、テキストリンク→水色 カーソルを重ねると→黄色になりましたが、記事内のテキストには反映されません。 ※訪問済みもアクティブも水色のままで良いので記述しなくてもいい気がしますが、原因が分からなくなりそうで、今のところ消していません。 cssを触りだして10日程度の初心者です。ご指導宜しくお願いします。
- ベストアンサー
- ブログ
- マススポインタがリンクの上に乗ると色が変わる設定方法
ホームページを作成中です。 リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、 それについてはこちらの以前からの質問で、 テキストエディタの<head>～</head>内に、 <style type="text/css"> a:link { color:blue; text-decoration:none; } a:visited { color:green; text-decoration:none; } a:active { color:pink; text-decoration:none; } a:hover { background-color:yellow; color:red; text-decoration:underline overline; } </style> と入れると色が変わるようになることを知りました。 その場合、そのままの状態では文字は緑色、マススを乗せると背景が黄色で文字色が赤色に、 クリック後はピンク色の文字に変わるようになると思います。 『a:link { color:blue; text-decoration:none; }』の部分はどこに生かされているのかわかりません。 この部分は一体何の意味があるのでしょうか？ また、上記をテキストエディタに貼り付けてしまうと、リンク部分が全てそうなってしまいますよね？ マウスを乗せた時には同じ背景色・文字色になってもいいのですが、 何もしない状態（見た目、上記で言う何もしない状態の時）にそれぞれに色を変える場合はどのようにすればいいのですか？ 例えると、下記３項目にそれぞれリンクテキストが貼り付けてあるとして、 あいうえお → ここは青色に かきくけこ → ここはオレンジ色に さしすせそ → ここは黄色に する場合、 どのような操作（作業）をすればそのとおりの色に変えることができるでしょうか？ とても解りづらい質問ですみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- FireFoxのテキスト表示について
フレーム、javascript、スタイルシート、cssファイル使いまくりなサイトですが、 FireFoxで表示すると、テキストにカーソルを置いた時に、 リンク時の状態になってしまいます。 具体的には、文字色が変わり、下線が表示されます。 これは、どうすれば解消できるでしょうか。 ちなみに、リンクの設定は下記の通りです。 リンク（訪問前）の指定 a:link{ color:#444444; text-decoration:none; } リンク（訪問済み）の指定 a:visited{ color:#444444; text-decoration:none; } リンク（カーソルを乗せた時）の指定 a:hover{ color:#c0c0c0; text-decoration:underline; } 良い解決方法がありましたら、よろしくお願いします。
- 締切済み
- ブラウザ
- CSSで指定したリンクのみに下線
現在CSSを使ってHPを作成しています。全体的にはリンクには下線を引かないように下記のように指定しました。 a:link{color:#523e35;text-decoration:none;} しかし、リンク色とテキスト色を同じにしたいので同じにしましたがどこにリンクが貼ってあるのか分かりません。 とりあえず、ホームページ内メニューの部分のみはリンクが張ってあるか把握できるようメニューのリンク部分だけにでも下線を引きたいのです。 試しに .menu_line { text-decoration: underline; } 上記をつかって<div class="menu_line">でメニューを囲ってみるとリンクの部分ではなく、テキストの部分にのみ下線がひかれてしまいました。 いったいどう指定すればメニューの部分のリンクにのみ下線を引くことができるでしょうか…。 ご存知の方がいれば教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS, リンクの色を一部変えるには？
全体にこちらを指定してまして a { text-decoration: none; color: #0099ff; } a:hover { text-decoration: none; color: pink; } 一部だけ緑色にしたいのですが .green a { text-decoration: none; color: green; } .green a:hover { text-decoration: none; color: black; } <a href="http://www.google.co.jp" class="green">Google</a> こうすると変わりません。。。 どなたかご存知でしょうか？
- ベストアンサー
- CSS
- 外部CSSでリンクカラー指定
外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか？ その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか？ またそのようにする方法があれば教えてください。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
Muller3さんのおっしゃるとおり「a:visited」と「a:hover」の順番が間違っていました。 順番を直したところ文字が赤くなり正常に動作しました。 ありがとうございました。