スタイルシート…

質問

たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので…

スタイルシートで、画像を固定し、尚且つ、
リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、
どのようにすればよいのでしょうか？

一応、

<style type="text/css">
<!--
body
{
background-image : url("画像のURL");
background-attachment: fixed;
background-position: 100% 0%;
background-repeat: no-repeat ;
}
a{text-decoration:none;}
a:link
{color:#色;}
a:active
{color:#色;}
a:visited
{color:#色;}
a:hover
{color:#色;}
-->
</style>

じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、
リンクの文字色は変わりませんでした…。
アドバイスお願いします！

回答No.3

noname#199778 · ベストアンサー

はじめに質問の内容を整理しますが、1・背景画像を1枚固定で表示したい、2・リンクの文字色をカーソルが乗ったときに変更されるようにしたい、の2点でよろしいでしょうか。
それで、1のほうについては解決できていると見てよいのですね?

リンクの文字色の変更については、質問文にある内容でだいたい合っています。 ただ、ちょっと直したほうが良いところもありますね。
リンクの文字色のスタイルシートによる指定は、擬似クラスというものを使います。 「:link」「:visited」「:hover」「:active」とされているものが擬似クラスになります。
それぞれの擬似クラスは、まだ見ていないリンクに関するスタイルを指定する:link、ブラウザにキャッシュされている(見たことがある)リンクに関するスタイルを指定する:visited、カーソルが上に乗ったときのリンクのスタイルを指定する:hover、リンクがアクティブにされたとき(クリックされた瞬間からボタンを離すまで、など)の時のスタイルを指定する:activeとなります。
で、この擬似クラスですが、ブラウザによっては、この部分を記述する順番によって、正常に反映されないことがあるようです。
擬似クラスの順序ですが、「:hover」は:linkと:visitedの後、:activeの前に記述し、「:active」は:link、:visitedと:hoverの後ろに記述するのが良いようです。
質問文ではこの順番が入れ替わっているので、反映されていない可能性もあるのではないかと思います。 まずはここを見直してみてはいかがでしょうか。

他の可能性としては、文字色の指定が不正だったり(#が抜けているとか、#以下の値に全角英数が使われているとか、色指定の桁数が足らないとか)、別にその部分の色を指定するような要素が入っていたり(fontタグでリンク内の文字色を指定しているなど)などの点についても、チェックしてみる必要があるかもしれません。
それと、リンク内の文字というのは、画像ではないですよね? もしフォントの関係上などで画像化している文字を含む場合、当然ながら画像の部分の文字色は画像ファイルによるもので、スタイルシートで操作することができません。

とりあえず、参考まで…

回答No.2

nitto3

私の場合は簡単に
<style type="text/css">
<!--
A:hover { TEXT-DECORATION: none; BACKGROUND:"#eeddff"; COLOR:"#9400d3" }
-->
</style>

回答No.1

yannie

「画像を固定して」の意味が分からなかったので
この部分は割愛させて頂きます。

単純にリンクの文字色を変えるのでしたら、

<STYLE TYPE="text/css">
<!--
a:link { text-decoration:underline; color: #6666CC }
a:visited { text-decoration:underline; color:#9999FF }
a:active { text-decoration:underline; color:#FF6699 }
a:hover { text-decoration:underline; color:#FF6699 }
body, tr, td { font-size: 11pt }
#mid { font-size: 11pt }
#small { font-size: 10pt }
-->
</STYLE>

これでOKです。
ちなみにこれは私が自身のHPで使っているスクリプトです。

ではでは。