Xpl*_*plo 8 html css text href
如何在链接下显示文字？
<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div>
登录触发p显示的位置？
我需要使用p还是别的？
Moh*_*kat 21
这很简单,只需在标签中添加title属性即可
<a href="http://www.studyofcs.com" title="Tricks Site">Studyofcs</a>
Nim*_*ima 15
以下样式使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> 简单的 Html 工具提示
<a href="https://stackoverflow.com/" title="Where Developers Learn, Share, & Build Careers">stackoverflow</a>
使用 Bootstrap 的工具提示：
<a href="https://stackoverflow.com/" title="Where Developers Learn, Share, & Build Careers">stackoverflow</a>
您还可以通过 Bootstrap+JQuery 实现悬停工具提示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>小智 6
如果您使用引导程序，您可以使用以下命令：
<a class="login" href="" data-toogle="tooltip" title="Access your profile here">Login</a>