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

締切済

質問者：DTRZQUIBP
質問日時：2014/10/25 01:27
回答数：3件

マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。

今、
<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;}が間違っていると思うので、
マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。

更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、
その方法も併せてご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2014/10/25 08:24

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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　この二項目は、必須です。これをマスターするとまったく違う世界が現れますよ。

- 0
- 件

通報する

No.2

回答者： hitomura
回答日時：2014/10/25 04:11

> a.{text-decoration: none;}が間違っていると思うので、

あなたの推察通りです。 . が余計です。

- 0
- 件

通報する

No.1

回答者： 4017B
回答日時：2014/10/25 02:00

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