マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。
今、
<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;}が間違っていると思うので、
マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。
更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、
その方法も併せてご教授お願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
この二項目は、必須です。これをマスターするとまったく違う世界が現れますよ。
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つを設定すれば問題無く動作しますが。後々の誤動作を防ぐためにも、リンクに関しては一通り全部設定して置いた方が良いです。またその場合、例文の通りの設定順序(優先順位)を順守してください。設定順番が異なると期待通りの動作をしません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS内で使われる山括弧の意味が...
-
個別にリンクの色を変える方法
-
外部css定義したclassをht...
-
CSSのクラス名・ID名の指定でワ...
-
p要素にclassとspanでclass適応...
-
HTML要素のid/class名の長さに...
-
同ページ内でリンクの色を変え...
-
htmlとcssで吹き出しの中に文字...
-
【VBA/HTML】IE画面内のページT...
-
サイトにjQueryが使用されてい...
-
透過背景を解除するにはどうす...
-
brにクラスをつけてcssでdispla...
-
スクリプトタグのボックスをCSS...
-
overflow:scrollのスクロールバ...
-
<span>で2重にかけているものを...
-
CSSでフロートを使うと時々中身...
-
:hoverで他の要素の値を変更で...
-
display:table-cell内でこんな...
-
htmlの文字が縦書きになる
-
1時間30分を簡単に表したいで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
<span>で2重にかけているものを...
-
外部css定義したclassをht...
-
CSSに同じclass名がいっぱい‥。...
-
子孫セレクタの読み方をおしえ...
-
liリストタグの背景色に色がつ...
-
「目次」と「サブ目次」のスタ...
-
【VBA/HTML】IE画面内のページT...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
ページの左右の余白(枠外)に...
-
透過背景を解除するにはどうす...
-
divでくくった中の要素にa link
-
brにクラスをつけてcssでdispla...
おすすめ情報