a:hoverの下線指定が反映されない

このQ&Aのポイント
  • htmファイルのheadタグ内に記述されているCSSの一部が反映されない問題が発生しています。特にa:hoverのunderlineが反映されなくなり、訪問済みの箇所も反映されなくなっています。
  • underline以外のスタイル、例えばfont colorやboldは正しく反映されているため、問題はa:hoverのunderlineの設定にあると考えられます。
  • 外部ファイルにCSSを記述したが読み込めなかったため、htmファイル内に記述したものの、underlineの反映ができない状態です。原因を特定して修正する必要があります。
回答を見る
  • ベストアンサー

a:hoverの下線指定が反映されない

htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。はじめは一部のリンク箇所だけが反映されなかったのですが、訪問済みになった箇所がどんどん反映されなくなってしまい、しまいにはすべての箇所が反映されなくなりました。ただし、それはunderlineのみでfont colorやboldはしっかり反映されているのです。 これはなぜでしょうか? ちなみにscriptの記述は一切していません。 最初は同様の記述を外部ファイルにしていたのですが うまく読み込めていないのかと思って、htmファイル内に 記述しましたがダメだったというわけです。 <style type="text/css"> <!-- body { font-size: 10.5pt; line-height: 130%} table { font-size: 10.5pt; line-height: 130%} a:hover{ text-decoration: underline; color: #FF0080; font-weight: bold} a:active { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> アドバイスお願いいたします。

  • HTML
  • 回答数3
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

順序が良くないです。 visitedを消すのではなく、hoverを一番下に記述すれば大丈夫です。

soyokaze
質問者

お礼

順番をかえたら反映されました。 盲点でした。ありがとうございました。

その他の回答 (2)

  • shizuku
  • ベストアンサー率33% (25/74)
回答No.3

A {text-decoration: none;} A:hover {text-decoration: underline;} ということではないでしょうか。

soyokaze
質問者

お礼

質問の記述には省いていましたが a:link、a:active..も個々にfont colorを 指定したかったためaのみでくくれなかったのです。 しかし、とりあえず解決しました。記述の順序がよくなかったようです。 ありがとうございました。

  • miyan
  • ベストアンサー率27% (19/68)
回答No.1

a:visited { text-decoration: none} の記述は訪問済みのリンクの下線を表示しなくするものです。 Hoverで下線表示の指定をしてもvisitedで打ち消してしまってます。 この場合a:visited { text-decoration: none} の記述を消してしまえば 意図した通りに表示されますよ。

soyokaze
質問者

お礼

解決しました。記述の順序がよくなかったようです。 ありがとうございました。

soyokaze
質問者

補足

早速のご回答ありがとうございます。 a:visited { text-decoration: none} をとったら 訪問済みは下線がでてしまいます。 マウスオーバーしたときのみ下線がでてほしいのです。 そのようなサイトを見たことがあったので なにか方法があると思うのですが..。

関連するQ&A

  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。 <style type="text/css"> <!-- img { vertical-align: bottom; } img { border-style:none; } a:hover img{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: “alpha( opacity=80 )”; } a{ text-decoration:none;} a:hover { text-decoration:underline;} --> 当方初心者でして詳しい方にご教授いただきたいです。 宜しくお願いいたします。

  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • a:hoverについて

    リンク毎に「a:hover」のスタイルを変更したいのですが、 a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: blue; } a:hover { text-decoration: underline; color: red; } 通常は↑のスタイルで、 a[aaa]:hover { text-decoration: underline; color: blue; } nameを指定したリンクの場合は↑にしたい。 <a name="aaa" href="~">リンク</a> このような感じだと、上のリンクにカーソルを持っていっても青に変わってくれません。 どーすれば良いでしょうか?

    • ベストアンサー
    • HTML
  • divでくくった中の要素にa link

    以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。

    • ベストアンサー
    • HTML
  • リンクの下線や色の指定を特定のところだけ設定したい

    HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ 下線を付けない onMouseの時だけ下線を付ける 色をデフォルト以外の色を付ける ようにしたいのですが、どのようにしたらいいでしょうか。 たとえばこの下はむちゃくちゃですが、 .link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }} こんな感じでスタイルシートに書いて <a href="xxxx.html"><span class="link">click</span></a> みたいな感じでも少しずつ変えながらいろいろ試してみたのですが 色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。 どうすればよいかご存じの方ご教授ください。

    • ベストアンサー
    • HTML
  • IEでCSSのアンカー色指定が反映しない

    <style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • リンクの下線と文字の間隔を開けるには

    ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述(ライブドア)になっているんですが、どう書き換えればいいのでしょうか。 a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{background-color:orange;text-decoration:none;} よろしくおねがいします

    • ベストアンサー
    • HTML
  • divでくくったけれど、反映が変になります。

    divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }

    • ベストアンサー
    • HTML
  • スタイルシートのアンカー部分

    スタイルシートを利用してのアンカー部分の指定についてです。 a:link {color: yellow; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:active {color: yellow; text-decoration: none; } a:hover {color: red; font-weight: bold; text-decoration: underline; } 現在、このように記述しています。 今までは、ページ毎に<STYLE TYPE="text/css">タグを使用し、本文中に記述していたのですが、その代わりとして新たに外部読み込みのcssファイルを使用してみました。 ところが、未訪問リンクだけが反映されないのです。 青文字で、下線付きで表示されてしまいます。 未訪問以外は、bodyなども含め、きちんと反映されています。 色々試行錯誤してみましたが、全然駄目だったので、 再び本文内に書き込む形を取りました。 IE5.5で動作確認しています。 この理由及び対策を御存知の方、教えていただけませんでしょうか?

    • ベストアンサー
    • HTML
  • マウスを重ねたら下線が出る

    マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか? <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>