- ベストアンサー
特定の画像リンクのhover時の文字色を変更する方法
- 特定の画像リンクにクラス名“diet”を付けて、hover時の文字の色を赤色に変更する方法を教えてください。
- HTMLに直接書き込む方法とCSSを利用する方法の2つの書き方を教えてください。
- 上記のように記述しているにも関わらず、うまくいかない理由について教えてください。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞画像の文字色を変えることなどできませんでしたね。 はい、しかし・・ <a href="./index.html"><img src="./images/Logo.gif" width="80" height="80" alt="Topへ"></a> このままでも、驚かれますが・・文字を表示させれば出来ます。 a[href="./index.html"]{ position:relative;line-height:80px; /* 画像の高さに合わせる */ text-align:center;display:inline-block; } a[href="./index.html"]:after{ content:"TOPへ";color:blue;position:absolute;top:0;left:0; font-weight:bold;font-size:20px;/*テキストの大きさ太さ */ width:80px;/* 画像の巾に合わせる */ } a[href="./index.html"]:hover:after{color:red;} 面白いでしょ(^^)
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみません。 回答のサンプルは、擬似要素、contentを使わない方法です。 擬似要素、contentを使うと、LogoRed.gifを用意する必要はありませんが、IEは半透明な要素に対応していませんのでまだ使わないほうが良いでしょう。 ※クラスの書き方がよくないのでしょうか？ クラスやＩＤは、デザインやスタイルシートのために書くものではありません。 DIV,SPANのみならず 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より そのうえで、その文書構造にしたがってセレクタを使って、スタイルを適用させる要素を特定していくのです。 いちいちクラス名を書いていたら、HTMLは膨大で複雑怪奇になってしまいます。 先のサンプルでしたら、HTML変更することないし、スタイルシートも「リンク先が./index.htmlのa要素」とその関連要素の設定だと、一目でわかるでしょ！！！。そしてなによりも先でもHTMLを書き換えなくてデザインを変更できる。 ※HTMLに直接書く方法はありません。javasciptを使う方法くらいしか思いつきません。 要素のstyle属性に:hoveのような擬似クラスはかけません。
お礼
ご回答いただきありがとうございます。 クラスは結構使っていて、そのクラス名も似ているものがあるので見分けるのが大変です。 その結果、おっしゃるように、HTMLが非常に複雑になってしまい、後から編集するのに時間がかかってしまいます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
a.diet:hover{} です。半角スペースも:も意味があって、半角スペースは子孫セレクタですから、 a.diet *:hover{}と解釈されます。*は全称セレクタ また、img要素は空要素で内容がありませんから、色をつける対象がありません。 <a href="URL">テキスト</a> なら出来ます。・・・ <a href="アドレス"><img src=画像のアドレス></a> であっても、:after,;before擬似クラスと、content:プロパティを使えば出来なくはないですが、・・・。なお、デザインのためにclass名なんぞつけなくて良いです。 たとえば、 <a href="./index.html"><img src="./images/Logo.gif" width="80" height="80" alt="Topへ"></a> だとすると・・Logo.gifと、それに置き換える赤っぽい画像(LogoRed.gif)は用意してください。 a[href="./index.html"]{position:ralative;width:80px;height:80px;display:inline-block;background-image:url(./images/LogoRed.gif);} a[href="./index.html"] img{border:none;} a[href="./index.html"]:hover img{display:none;} とか・・。 最後のスタイル指定を分解すると・・ a 要素セレクタ 詳細度 [0,0,0,1] 半角スペース 子孫セレクタ [href="./index.html"] 要素セレクタ 詳細度[0,0,1,0] :hover 動的な擬似クラス 詳細度[0,0,1,0] 半角スペース 子孫セレクタ img 要素セレクタ 詳細度[0,0,0,1] 詳細度の合計は[0,0,2,2]です。
お礼
ご回答いただきありがとうございます。 画像の文字色を変えることなどできませんでしたね。 申し訳ありませんでした。
- aoumiushi
- ベストアンサー率45% (234/512)
<a>タグ内にクラスが指定されていません。 <head> <style type="text/css"> <!-- a.diet:hover { color: red; } --> </style> </head> <body> <a class="diet" href="アドレス"><img src=画像のアドレス></a> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ※外部ファイル化する場合 エディタ等で、以下のように書いてファイル名を”style.css”で保存する。ファイル名は例です a.diet:hover { color: red; } HTML本体の<head>タグ内にスタイルシートのパス＆ファイル名を記述します。 パス名＆ファイル名は、間違わないようにして下さい <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a class="diet" href="アドレス"><img src=画像のアドレス></a> </body> 本体内に書いたCSSは削除してください。
お礼
ご回答いただきありがとうございます。 確かに、<a>タグ内にクラスをつけていませんでしたね。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご回答いただきありがとうございます。 しかしすごいですね。 何でもできますね・・・。