将鼠标悬停在 href 上时如何显示文本

Question

我如何使文本出现在链接下方？

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

登录在哪里触发 p 显示？

我需要使用 p 还是其他东西？

原文由 Xplo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下样式使 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>

原文由 Nima 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这很简单，只需在标签中添加 title 属性

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

原文由 Mohsin Shoukat 发布，翻译遵循 CC BY-SA 3.0 许可协议