締切済み

リンク先がある状態の文字をオンマウスで別カラーにしたい

2010/01/11 10:44

CSS関連について質問させていただきます。現在WEB制作をMacintoshのiBookG4のアドビのGoLive CS2で制作しています。今回質問させていただくのはリンク先がある状態の文字をオンマウスにしたときにカラーが変わる設定その設定を文字ごとにオンマウスでこの文字は「赤」、この文字は「青」というようにカラーをつけるにはどういうCSSを作り GoLive CS2ではどう適応設定すればいいのか、という質問です。 CSS設定を見たのですがリンク先等がない普通のテキストは CSSで文字の大きさや行間などは変更して設定・適応はできるのですがどうしてもリンク先のある文字をオンマウスの状態にした時にこの文字は赤、この文字は青などの設定を行ないたいのです。 (a:linkでオンマウスの色を赤に設定するとすべて赤になってしまいました…) 因にCSSエディタ→新規スタイル→a:linkというところで設定を行なっています。もしかしたら基礎的な事かも知れませんが参考書・ネットで調べていてもわからなかったので質問させていただきました。大変わかりにくい説明ですがもしご存知の方いらっしゃいましたらどうかよろしくお願いします！！

yana06329
お礼率7% (6/85)

CSS
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/01/11 14:27 回答No.2

この程度でも、GoLive CS2ではややこしい。テキストエディタのほうがはるかに楽ですし、細かく設定できる。--詳細度を使う段階になるとツールでは無理。　順番は 1: :link、:visited　リンクと訪問済み 2: :focus、:hover　　タブインデックスやキーボード、およびマウスでフォーカス 3: :active　アクティブ　で指定する必要があります。　以下はサンプル。HTMLは、とりあえずスタイルシート無効のブラウザやテキストブラウザ、ＳＥ、携帯端末用にリストで、マークアップしてあります。　そのうえでスクリーンブラウザ用のスタイルシート指定 ☆タブは全角スペースで置き換えてあります。テストするときは"全角スペース"をタブに置換して。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> 　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> 　<title>サンプル</title> 　<meta http-equiv="Content-Style-Type" content="text/css"> 　<style type="text/css">  　</style> 　<link rel="START" href="../index.html"> </head> <body> 　<h1>回答一覧</h1> 　<ol class="answerList"> 　　<li class="typeA"> 　　　<ul> 　　　　<li><a href="">あさ</a></li> 　　　　<li><a href="">あさ</a></li> 　　　</ul> 　　　<p>↑この文字はオンマウス(リンクがある状態)で赤い文字の<span>あさ</span>を表示したい。</p> 　　</li> 　　<li class="typeB"> 　　　<ul> 　　　　<li><a href="">あさ</a></li> 　　　　<li><a href="">あさ</a></li> 　　　</ul> 　　　<p>↑この文字はオンマウス(リンクがある状態)で青い文字の<span>あさ</span>を表示したい。</p> 　　</li> 　　<li class="typeC"> 　　　<ul> 　　　　<li><a href="">あさ</a></li> 　　　　<li><a href="">あさ</a></li> 　　　</ul> 　　　<p>↑この文字はオンマウス(リンクがある状態)で緑の文字の<span>あさ</span>を表示したい。</p> 　　</li> 　</ol> </body> </html>

mazimekko3
ベストアンサー率38% (74/194)

2010/01/11 12:24 回答No.1

「リンク先がある」というのは href属性が設定されている a要素ということでしょうか？オンマウス時のみ適用するスタイルは :link擬似クラスじゃなくて :hover擬似クラスを使えばいいと思いますが, a[href] { /* 通常のスタイル */ } a[href]:hover { /* オンマウスのみ通常のスタイルを上書きするスタイル */ } とかで指定できる. a要素に含まれる「文字ごとに違うスタイル」を適用させたいなら, それなりにソースを汚さないといけない. <a href=""><span clas="red">赤</span><span clas="blue">青</span></a> とか書いて, a[href]:hover span.red { color: red; } a[href]:hover span.blue { color: blue; } :hover擬似クラスの子孫である span に個別にスタイルを適用するとか. 異なる a要素ごとにスタイルを適用するのならば, a要素に直接 class なり id なりを指定すればいい. <a class="red" href="">ここはオンマウスで赤</a> a.red:hover { color: red; } とか.