リンクのスタイルでページ全体で

a:link { text-decoration: none; color: #FF0000;}
a:visited { text-decoration: none; color: ##FF9900;}
a:active { text-decoration: none; color: #FF6600;}
a:hover {
text-decoration: underline;
color: #FFFFFF;
background-color: #FF0000;
}

と言うスタイルをかけてhoverで色が出るように指定してあります。そのページ内でidで背景指定、独自にリンク等をスタイルでを指定してリンクを張っている部分があるのですが、IEだとページ全体にかけている

a:hover {
text-decoration: underline;
color: #FFFFFF;
background-color: #FF0000;
}

が反映されてマウスオーバー時に画像に色が付いてしまいます。FireFox、ネスケだと大丈夫でした。
いろいろ試してみましたが、解決せず困っています。詳しい方いらっしゃいましたら教えて下さい。
宜しくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2007/09/12 20:39:59
  • 終了:2007/09/19 11:21:42

回答(2件)

id:tezcello No.1

tezcello回答回数459ベストアンサー獲得回数692007/09/12 22:40:41

ポイント35pt

cssは後で指定した物が有効という事なので、リンクされている画像にはマウスオーバー時に色を付けないのを追加指示したらどうでしょう。(最後の行です)

a:link { text-decoration: none; color: #FF0000;}
a:visited { text-decoration: none; color: ##FF9900;}
a:active { text-decoration: none; color: #FF6600;}
a:hover { 
text-decoration: underline;
color: #FFFFFF; 
background-color: #FF0000;
}
a:hover img { text-decoration: none;  background-color: transparent;}

(Mac mini なので、IEを持っていない為、動作確認出来てません。ごめんなさい)

id:praide

確認しましたがダメでした…

ありがとうございます。

2007/09/13 11:53:20
id:makoohira No.2

makoohira回答回数136ベストアンサー獲得回数42007/09/13 01:50:50

ポイント35pt

画像に色がつくの意味が分からないですが、

IEはCSSバグがすごい数あるので、倍の労力を使いますね。

a#ID名{}

だけでなく

a#ID名:hover{}

にもスタイルを入れてみてはいかがでしょう?

あと、background:;で背景スタイルをまとめていると、

個別指定のほうを優先するので、バグがあるとこだけ、個別に描いてみる。

id:praide

個別に設定しているのですが、ダメでした。

しかも、見る環境によっても違いがあるようです。ありがとうございます。

2007/09/13 12:53:25
  • id:tezcello
    Winな環境でテストしてみました。

    a:link { text-decoration: none; color: #FF0000;}
    a:visited { text-decoration: none; color: ##FF9900;}
    a:active { text-decoration: none; color: #FF6600;}
    a:hover { text-decoration: underline; color: #FFFFFF; background-color: #FF0000;}
    img { border-style: none; background-color: Window;}

    こんな感じでいかがでしょう。(例によって変更箇所は最後の行だけです)
    img タグに指定している背景色は、Windowの背景色という意味になるそうです。
    他にもいろいろありますがそれらはこちらへ
    http://www.tohoho-web.com/wwwcolor.htm#ColorUserDefine
  • id:praide
    自己解決しました!
    tdにidで背景指定して、
    #id名 a{display:block; height:100%; width:100%;}
    と指定してやるとチカチカがなくなりました。
    皆さんありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません