web-dev-qa-db-ja.com

hrefにカーソルを合わせたときにテキストを表示する方法

リンクの下にテキストを表示するにはどうすればよいですか？

<div class="login">
    <a href="">Login
    <p>Access your profile here</p>
    </a>
</div>

ログインするとpが表示されます。

Pなどを使用する必要がありますか？

htmlcsstexthref
10
Xplo

次のスタイルは、ホバー時にpを表示します。

.login a p {display:none;}
.login a:hover p {display:block;}
<div class="login">
    <a href="">Login
        <p>Access your profile here</p>
    </a>
</div>

または、内部にpを含むリンク全体がホバー時に一緒に見えるようにしたい場合は、以下を使用します。

.login a p {display:none;}
.login a:hover p {display:block;}
.login a:hover {display:block;}
<div class="login">
    <a href="">Login
        <p>Access your profile here</p>
    </a>
</div>
12
Nima

これは、タグにタイトル属性を追加するだけです。

<a href="http://www.studyofcs.com" title="Tricks Site">Studyofcs</a>
13
Mohsin Shoukat

bootstrapを使用している場合は、以下を使用できます。

<a class="login" href="" data-toogle="tooltip" title="Access your profile here">Login</a>

2
Giannis Brandt