title の指定 | teratail

html
1<div class="text1">
2  <a title="テキスト１">テキスト１</a>
3</div>
4<div class="text2">
5  <a title="テキスト2">テキスト2</a>
6</div>

上のコードでおそらく、テキストをホバーさせた時にテキスト1と表示されると思うのですが、CSSでclassがtext1のtitle="テキスト１"だけにスタイルを適応させたい時にどういう風にCSSを書いたらいいですか？
セレクタと言うやつですかね？

行動規範の内容に同意します

回答2件

どのテキストかわかりませんが、質問者さんのコードでは、テキストをホバーさせていない時にもテキストが表示されるのですが...
CSSでclassがtext1のtitle="テキスト１"の文字のところにスタイルを適応させたい時、というのは以下のような挙動でしょうか？

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 {
13            color: #ffff00;
14        }
15    </style>
16</head>
17<body>
18<div class="text1">
19    <a title="テキスト１">テキスト１</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="テキスト１">テキスト１</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

s8_chu

総合スコア14731

ryo-dev

2017/03/06 15:33

<a title=""></a>でつけたtitleはhover指定しなくても表示されるんじゃないですか？

ryo-dev

2017/03/06 15:34

それと、スタイルを変えたいのは、aタグのスタイルを変えたいのではなく、表示されるtitle=""の中のテキストのスタイルを変えたいんです。

ryo-dev

2017/03/06 15:39

わかってもらいやすいのはyoutubeの動画のタイトルをホバーするとはいりきっていないテキストも表示されますよね？で、認証バッジをホバーすると認証済みとテキストが表示されると思います。これはtitle=""の中にそれぞれのテキストが入ってました。（確認済み）なので、それぞれで表示形式を変えたいので、CSSでスタイルを指定したいと思っている次第です。

ryo-dev

2017/03/06 15:39

非常にわかりづらい説明でごめんなさい。

ryo-dev

2017/03/06 15:51

回答頂いて、調べて見た結果変更はできないみたいです。回答いただきありがとうございました。