- 締切済み
マウスカーソルを当てた時だけハイパーリンクの下線を
マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。 今、 <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;}が間違っていると思うので、 マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。 更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、 その方法も併せてご教授お願いします。
- DTRZQUIBP
- お礼率69% (16/23)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSのタイプセレクタはHTMLで言うと要素だけを書きます。 a.{text-decoration: none;} ではなくて a{text-decoration: none;} です。.はクラスセレクタでそれに続けてclass属性の値リストの中の一つを書きます。属性セレクタ E[class~=]と同じものです。 なお、a{}でしたら、a要素すべてに適用されますから、 a:link{}と擬似クラスをつけておくと、<a name="">には適用されませんから確実です。 これらは、 a:link{} a:visited{} リンク と訪問済みリンク a:focus{} a[hover{} フォーカスが当たっている物 ポインターが乗っているもの a:active{} アクティブなリンク と組み合わせて使用することが多いです。その場合この順番で書かないと詳細度が同じですからうまく動作しません。 a:link{text-decoration:none;} a:link img{border:none;}/* 古いIE */ a:hover,a:focus{text-decoration:underline;position:relative;} a:hover:after,a:focus:after{content:"▼";position:absolute;top:-1em;right:0;} とか・・ ★CSS(カスケーディング スタイル シート)がここまで利用されHTML5ではデフォルトのスタイルシートになった最大の長所は、カスケーディング機能なのです。 セレクタや、それによるカスケーディングの機能をしっかり身につけないとスタイルシートは使いこなせません。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) この二項目は、必須です。これをマスターするとまったく違う世界が現れますよ。
- hitomura
- ベストアンサー率48% (325/664)
> a.{text-decoration: none;}が間違っていると思うので、 あなたの推察通りです。 . が余計です。
- 4017B
- ベストアンサー率73% (1303/1774)
aタグ（<a href=～>）の下線設定は "text-decoration" じゃ無くて "border-style" で設定します。とりあえず以下の様な感じで設定可能。 a { border-style: none; text-decoration: none; } a:link { color: #009; } a:visited { color: #009; } a:hover { border-style: none; border-bottom: 2px solid #00c; color: #00f; } a:active { border-style: none; border-bottom: 2px solid #900; color: #900; } P.S. 基本的には a、a:link、a:hover ～の3つを設定すれば問題無く動作しますが。後々の誤動作を防ぐためにも、リンクに関しては一通り全部設定して置いた方が良いです。またその場合、例文の通りの設定順序（優先順位）を順守してください。設定順番が異なると期待通りの動作をしません。
関連するQ&A
- マウスを重ねたら下線が出る
マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか？ <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>
- 締切済み
- HTML
- リンクがあるのに、マウスが上にきても指マークならない方法
リンクがあるのに、マウスが上にきても指マークならない方法はありますか。 下記だと下線非表示で、色も黒ですが、さらにマウスが来てもカーソルが変わらないように。 <A href="***.html" STYLE="text-decoration:none;color:black">リンク先</A>
- ベストアンサー
- CSS
- 下線（アンカー）の表示を特定の文字のみ設定するには
特定の文字には下線を表示させ、特定の文字には下線を表示させないようにするには？ <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
- CSS ある場所だけリンク時に下線表示
タイトルの通りなのですが、ページ全体ではなく 特定の場所のテキストリンクにオンマウスしたら 下線が表示されるようにしたいんです。 スタイルシートの書き方にとまどっており、 <div style="～"> で始めて </div> で閉じ、 a:link {color: #ffffff; text-decoration: none} a:hover {color: #ffffff; text-decoration: underline} を使うところまではわかるのですが…。 どなたか正しい記述を教えていただけないでしょうか？
- 締切済み
- HTML
- テーブル内のリンク下線
テーブル内のリンク下線（多数）を全て消したいのですが、 <table style="text-decoration:none;"> ではできず、 <a href="" style="text-decoration:none;"> と全てに指定しなければなりません。 これはいっぺんに適応はできないものなのでしょうか？
- 締切済み
- その他（プログラミング・開発）
- ～マウスオンしたときに下線を表示させたい～
すみません。教えてください。 リンク先の下線を消す場合、要素に直接書くときは下記のように書けばいいのですよね。 <a href="リンク先" style="text-decoration:none;">文字</a> マウスオンしたときだけ下線を表示させる場合はどうしたらいいのでしょうか。 お分かりの方宜しくお願いします。
- ベストアンサー
- HTML
- マウスオーバーで下線を表示させる（リンク）
<a href="リンク先" target="_blank" style="text-decoration: none;"> <font size="-1" color="405050" onMouseOver="this.style.color='#dc143c'" onMouseOut="this.style.color = '#405050'"> 文字列</a></font> というタグで、マウスオーバーで文字色が変わるように しています。 下線を常時表示させてもいいのですが、 表示させると文字が読みにくくなってしまうので、 マウスオーバー時のみ下線を表示させ、 文字色も変えるタグはないでしょうか？ 出来れば上記のようにタグに直接挿入する ものが希望です。よろしくお願いいたします。
- ベストアンサー
- HTML
- 文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが
スタイルシートの定義で質問です。 文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですが やり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。 これだと、ハイパーリンク文字にマウスをおいても白文字のままです。 この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・ ・ </body>
- 締切済み
- HTML
- ブログの下線
fc2ブログでアフィリエイトをしています。 私のブログのテンプレートは、ブログタイトルと記事のタイトルにカーソルをもって行くとリンクの下に下線が表示されるのですが、それ以外は色が変わるだけで下線が表示されません。 画面右側(プラグインカテゴリ2)のフリーエリアは、テキストリンクに常に下線が表示されるようにしたいんです。 他のリンクはカーソルがきた時だけ、下線がでるようにしたいです。 ブログ初心者なので分かりやすくお願い致します。 /* リンクの設定 */ a{cursor : pointer ;} a:link{ color : #000000; text-decoration: none; } a:visited{color : #000000; text-decoration: none; } a:active{color : #008B8B;} a:hover{color : #2F4F4F;} .entry a{font-weight: nomal;} h1, h2, h3{ color : #808080; text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; } h2 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- リンク文字変化のタグについて
リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。 色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]～[/head]の間に注入するタグのようなのですが <STYLE type="text/css"> <!-- A:HOVER{ position : relative; top:3px; left:3px;} A{text-decoration : none; } --> </STYLE> このように[head]～[/head]の間に挿入するタイプのものではなく 個別で指定するにはどのように記述すればいいでしょうか？ ↓例えばコレは[head]～[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
