CSSのA:hoverについて
- IEでは問題ないが、FireFox2やオペラではマウスを乗せると赤く反転してしまう。
- XHTMLにはマウスオーバー時のスタイルを指定するA:hoverがあり、IEでは正常に動作するが、FireFox2やオペラでは赤く反転する。
- 問題は、A:hoverの色指定がうまく適用されないことにある。
- ベストアンサー
CSSのA:hoverについて
次のようなXHTMLを、IEで表示すると、問題ないのですが、 FireFox2やオペラで表示すると、○○○○○の部分にマウスを乗せると 赤く反転してしまいます。 なぜでしょうか？ test.html－－－－－－－－－－－－－－－－－ <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>テスト</title> <style type="text/css"> <!-- body { font-family:'ＭＳ 明朝','明朝','ＭＳ ゴシック'; background-color:#FFFFFF; } A:link,A:active,A:visited { text-decoration:underline; color:#0000FF; } A:hover { text-decoration:underline; color:#FF0000; } --> </style> </head> <body> <div align="left"> <b>（タイトル）</b></div> <b>見出し１</b><a name="見出し１"/> ○○○○○○○○○（<a href="#">▲▲▲▲▲▲</a>××××××<br/> </body> </html>
- w0a15455
- お礼率57% (281/486)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞自動的に、<a name="○○○" /> と変換されてしまいます。 <a name="見出し１"> に対する終了タグがないから、自動的にスラッシュが付くのではないですか？ <a href="#">▲▲▲▲▲▲ より前（例えば～○○○</a>（<a href="#">▲▲～）とつけて（終了して）いますか？ 色が反転するのは、<a>要素のhover指定のせいでしょうね。 IE以外では<a>要素以外にもhover指定が可能なのを考えれば、ありうるかと。 a[name]:hover {color: inherit;} xhtmlでname属性のアンカーって使えましたっけ？ http://www.xml.vc/hp/keitai/link-id1.html
その他の回答 (1)
- shimix
- ベストアンサー率54% (865/1590)
IEが手を抜いているだけだと思います。アンカーは空要素ではありませんから <a name="見出し１"/> でなく、 <a name="見出し１"></a> と書かないといけません。
補足
そうなんですね。 ただ、環境を書くのを忘れたのですが、 XML→XHTMLの変換をしています。パーサは、MSXMLを使っているのですが、自動的に、<a name="○○○" /> と変換されてしまいます。 これは、何とかならないのでしょうか？ 環境：WinXP(SP2)+IE7 or FireFox2 + MSXML
関連するQ&A
- a:hoverについて
リンク毎に「a:hover」のスタイルを変更したいのですが、 a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: blue; } a:hover { text-decoration: underline; color: red; } 通常は↑のスタイルで、 a[aaa]:hover { text-decoration: underline; color: blue; } nameを指定したリンクの場合は↑にしたい。 <a name="aaa" href="～">リンク</a> このような感じだと、上のリンクにカーソルを持っていっても青に変わってくれません。 どーすれば良いでしょうか？
- ベストアンサー
- HTML
- divでくくったけれど、反映が変になります。
divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }
- ベストアンサー
- HTML
- CSSのチェックをお願いします。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133;} .t { color : #454580;} p { color : #222222;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} １．改行に何か意味はあるのでしょうか？ ２．記述の順番や付け足し、削除すべき項目がありましたら、お願いいたします。
- ベストアンサー
- HTML
- 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう
Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ベストアンサー
- HTML
- CSSのアドバイスをお願いいたします。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133; } .k { color : #336070; } .t { color : #454580; } .s { color : olive; } p { color : #222222; } body { background-color:#e0ffe0; } a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066; </style> <meta http-equiv="Content-Script-Type" content="text/javascript" />の１行を加えてみました。 この場合の記述の是非。 また記述すべき個所は合っているのでしょうか。
- ベストアンサー
- HTML
- a:hoverの下線指定が反映されない
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} --> アドバイスお願いいたします。
- ベストアンサー
- HTML
- 携帯サイトでのcssトラブル
携帯サイトを作っています。 xhtmlの宣言を↓の通りにしております。 <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> リンクなどは、cssを使ってサイトを作っており、3キャリアのエミュレーターでは問題なく表示されています。 しかし、本の通りに作っているのですが、自分の携帯（docomo SH-03A)ではまったくcssが機能しません。 以下に、主に使っているタグなどについて書いていきます。何かおかしいところがあれば教えてください。 内部参照リンク <style type="text/css"> <!-- a, a:link {color:#ff0000;} a:visited {color:#ff0000;} a:active {color:#ffffff;} a:hover {color:#663399;} --> </style> ボディスタイル <body style="background-color:#ccccff;color:#000000;"> <div>タグ <div style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;" align="center">○○○○</div> ↑でだめだったので、↓のように<span>にはさんでみたがだめでした。 <div align="center"><span style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;">○○○○</span></div> 非常に困っています。なにとぞよろしくお願いします。
- ベストアンサー
- HTML
- 外部ＣＳＳをかくには。
ＨＰのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部ＣＳＳでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY { letter-spacing:7px; line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。
- ベストアンサー
- HTML
- CSS、おかしいですか？
CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか？ <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>
- 締切済み
- CSS
- CSS ある場所だけリンク時に下線表示
タイトルの通りなのですが、ページ全体ではなく 特定の場所のテキストリンクにオンマウスしたら 下線が表示されるようにしたいんです。 スタイルシートの書き方にとまどっており、 <div style="～"> で始めて </div> で閉じ、 a:link {color: #ffffff; text-decoration: none} a:hover {color: #ffffff; text-decoration: underline} を使うところまではわかるのですが…。 どなたか正しい記述を教えていただけないでしょうか？
- 締切済み
- HTML
お礼
ありがとうございました。 xhtmlでname属性は使ってはいけなかったんですね。 XSLTを修正して、対応したいと思います。