html
1<div class="text1"> 2 <a title="テキスト1">テキスト1</a> 3</div> 4<div class="text2"> 5 <a title="テキスト2">テキスト2</a> 6</div>
上のコードでおそらく、テキストをホバーさせた時にテキスト1
と表示されると思うのですが、CSSでclassがtext1のtitle="テキスト1"だけにスタイルを適応させたい時にどういう風にCSSを書いたらいいですか?
セレクタと言うやつですかね?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
どのテキストかわかりませんが、質問者さんのコードでは、テキストをホバーさせていない時にもテキストが表示されるのですが...
CSSでclassがtext1のtitle="テキスト1"の文字のところにスタイルを適応させたい時、というのは以下のような挙動でしょうか?
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .text1 a[title="テキスト1"]:hover { 13 color: #ffff00; 14 } 15 </style> 16</head> 17<body> 18<div class="text1"> 19 <a title="テキスト1">テキスト1</a> 20</div> 21<div class="text2"> 22 <a title="テキスト2">テキスト2</a> 23</div> 24</body> 25</html>
追記
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .text1 a[title]:hover::after { 13 display: block; 14 position: absolute; 15 top: 1.0em; 16 left: 1.0em; 17 width: 12em; 18 border: #000 solid 1px; 19 background: #fff; 20 color: #000; 21 content: attr(title); 22 z-index: 2; 23 } 24 </style> 25</head> 26<body> 27<div class="text1"> 28 <a title="テキスト1">テキスト1</a> 29</div> 30<div class="text2"> 31 <a title="テキスト2">テキスト2</a> 32</div> 33</body> 34</html>
投稿2017/03/06 15:28
編集2017/03/06 15:56総合スコア14731
0
ベストアンサー
そこはブラウザ依存なのでブラウザごとに表示が違います。スタイルはできません。
ツールチップを表示したければ別途CSSやJavaScriptで行います。
【H33: title属性を用いて、リンクテキストの文言を補足する|WCAG 2.0 実装方法集】
http://waic.jp/docs/WCAG-TECHS/H33
現在のグラフィカルなユーザーエージェントは、title属性の内容表現をコントロールするメカニズムを提供していない。利用者は、ツールチップのテキストのサイズを変更したり、前景色と背景色をコントロールしたりできない。
投稿2017/03/06 15:42
総合スコア69364
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/06 15:33
2017/03/06 15:34
2017/03/06 15:39
2017/03/06 15:39
2017/03/06 15:51
2017/03/06 16:00
2017/03/07 08:05