締切済み

マウスカーソルを当てた時だけハイパーリンクの下線を

2014/10/25 01:27

マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。今、 <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)

2014/10/25 08:24 回答No.3

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)

2014/10/25 04:11 回答No.2

> a.{text-decoration: none;}が間違っていると思うので、あなたの推察通りです。 . が余計です。

ログインすると、全ての回答が全文表示されます。

4017B
ベストアンサー率73% (1341/1821)

2014/10/25 02:00 回答No.1

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つを設定すれば問題無く動作しますが。後々の誤動作を防ぐためにも、リンクに関しては一通り全部設定して置いた方が良いです。またその場合、例文の通りの設定順序（優先順位）を順守してください。設定順番が異なると期待通りの動作をしません。

ログインすると、全ての回答が全文表示されます。