- 締切済み
Operaのバージョン９でa:hover { text-decoration: underline; }が動作しない
Operaのバージョン９で以下のCSSが正常に動作しません。 症状：リンクにマウスオーバーしても下線が表示されない。 使用OS：Windows XP SP2 <html> <head> <style type="text/css"> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> </ul> </body> </html> この問題を解決するにはどうすればよいのでしょうか？ ご存知の方がおられましたらご回答をよろしくお願いします。
- nana_watuki
- お礼率61% (142/232)
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
フォントサイズは12pxや120%でも下線が見えました。 出ているのでしょうが、フォントサイズの問題で見えないようですね。 Opera9でのtext-decoration: none/underlineの挙動が怪しいという報告を見たことがあるので、サポートに報告もいってるんじゃないでしょうか。 Operaでの標準フォントサイズをいじっておくという手もありますが（笑）根本的な解決にはならないので、Weekly Buildが進めば改善されるだろうと割り切ってしまうか、どうしても我慢できなければ率先してフォーラムやMLで投稿してみてもいいかもしれません。
- 345itati
- ベストアンサー率48% (795/1639)
>最初は３つとも下線が表示されていなくて マウスオーバーしたときにのみに下線が表示されるということでしょうか？ その動作です。ソースでもa: hoverでオンマウス時にアンダーライン表示になっていますし、Operaのエラーコンソールにもエラーは出てきていません。 確認したのは、 Windows XP SP2 Opera9.10 Mac OS 10.4.8 Opera9.02 です。。。 念の為、CSSをちょっと丁寧に <style type="text/css"> <!-- a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } --> </style> と記述してみても変わりませんか？
補足
上記の記述にしてみたのですが特に変化はありませんでした。 念のため同じOSが入っているノートパソコンの方にOperaをインストールして 動作検証をしてみたのですが、こちらの方は問題なく動作しました。 ちなみにfont-sizeを99%以下に設定することで、この問題を解決できるのことが いろいろと試してみた結果わかったのですが、なぜこのような現象が起きるのかは不明です。
- 345itati
- ベストアンサー率48% (795/1639)
>その下線が見えていないことが動作の異常です。 当方のOperaでは、普通に下線が表示されます。 恐らく質問者様側のOperaの問題になるかと？
補足
それは上記のソースをコピー＆ペーストしたあと 最初は３つとも下線が表示されていなくて マウスオーバーしたときにのみに下線が表示されるということでしょうか？ 私のOperaはインストールしてから設定をいじっていないので 特に問題はないはずなのですが・・・ よろしければ345itatiさんのOperaのバージョンと使用OSを教えてください。
- key-child
- ベストアンサー率54% (25/46)
見えてないだけじゃないでしょうか。 動作に以上は見られません。 ズーム１００％で見たときは下線が見えませんでしたけど、 ズーム２００％で見たときは下線が見えました。 普段使ってますが、同じページでもリンクの下線が表示されてるものと表示されていないものがある場合があります。
補足
その下線が見えていないことが動作の異常です。 現在、リンクにマウスオーバーしても下線が 表示されない問題の解決方法を募集しています。
関連する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
- a:hoverの下線指定が反映されない
htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。 <style type="text/css"> <!-- img { vertical-align: bottom; } img { border-style:none; } a:hover img{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: “alpha( opacity=80 )”; } a{ text-decoration:none;} a:hover { text-decoration:underline;} --> 当方初心者でして詳しい方にご教授いただきたいです。 宜しくお願いいたします。
- 締切済み
- 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
- ｃｓｓでの擬似リンク（a:hover）の複数指定
cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうｋまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル１</il> <li class="list2">スタイル２</il> </ul> </a></div>
- ベストアンサー
- HTML
- マウスを重ねたら下線が出る
マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか？ <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>
- 締切済み
- HTML
- 何故か一部だけ、text-decoration: none; にならない・・
a:link { color: #000000; text-decoration: none; } a:visited { color: #339999; } a:hover { color: #FF6600; text-decoration: underline; } これを外部スタイルシートで使っているのですが、 いろいろあるリンク先の一部（全体の５％ぐらい）だけ何故か「text-decoration: none;」 にならずアンダーラインが表示されます。 もともとはアンダーラインがあった状態だったのもを変更したのですが、 一部変更にならないという症状です。 ・どのページでも同じような事が起こっています。 ・リンク先に共通性はないと思います。 これは何によるものなのでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- マウスカーソルを当てた時だけハイパーリンクの下線を
マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。 今、 <html> <head> <title>test</title> <style type="text/css"> a.{text-decoration: none;} </style> </head> <body> <a href="http://www.yahoo.co.jp/">yahoo</a> </body> </html> というコードですが、 まず、a.{text-decoration: none;}をしてるのに、リンクに下線がついてしまいます。 a.{text-decoration: none;}が間違っていると思うので、 マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。 更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、 その方法も併せてご教授お願いします。
- 締切済み
- CSS
- 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>
- ベストアンサー
- HTML
- CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- 下線（アンカー）の表示を特定の文字のみ設定するには
特定の文字には下線を表示させ、特定の文字には下線を表示させないようにするには？ <style type="text/css"> a { text-decoration: none; } </style> </head> <body> <a href="index.html">下線あり</a> <a href="index.html">下線なし</a> これだと、どちらも下線が付きません。 <a href="index.html">下線あり</a>は下線を付けるにはどうすればいいですか？
- ベストアンサー
- HTML
補足
確かにほかにも同じような症状の方をよく見かけます。 しばらくはfont-sizeを99%以下に設定することで解決しようと思います。