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}
-->

アドバイスお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

順序が良くないです。


visitedを消すのではなく、hoverを一番下に記述すれば大丈夫です。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/03 18:29

A {text-decoration: none;}


A:hover {text-decoration: underline;}

ということではないでしょうか。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/03 18:31

a:visited { text-decoration: none}


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

この回答への補足

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

補足日時:2001/04/03 16:02
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/03 18:27

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QCSSのa:hoverが急に一部だけ効かなくなった

Web制作初心者です。

セオリー通りグローバルナビゲーションを

<ul><li><a href="***">内容</a></li></li>

で作り、CSSでa:hoverを設定し普通に機能していたのですが、急に
5項目あるナビのうち1つだけロールオーバーしても色が変わらない状態に陥ってしまいました。

どんな要因が考えられるでしょうか??

因みに、他のWeb制作時は全く同じやり方でしっかり機能しています。

Aベストアンサー

ウェブ製作ならfirefoxと開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )をお使いだと思いますが、それにfirebugというアドオンがあります。
それを使って、他の要素が上にかぶさっていないか確認してください。
また、
・その要素にhoverされているか
・hoverされた要素にスタイルが適用されるか

 たぶん、HTMLかスタイルシートの書き方に問題なければ、他の要素がかぶさっていることが原因でしょう。


人気Q&Aランキング