我希望将鼠标悬停在我的链接旁边时能显示更多文本，就像这样；
链接---文本进一步解释链接
我已经使用了几种方法，但没有一种是我需要的。到目前为止，这是我的代码；
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Righteous|Oswald|Slabo+27px' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<h1> MangoPulp</h1>
<header>
<div class="nav">
<ul class="nav">
<li class="Home"><a href="#">Home</a></li>
<li class="Purchase"><a href="#"> Purchase</a></li>
<li class="Products"><a href="#">Products</a></li>
<li class="SoggyNotions"><a href="#">SoggyNotions</a></li>
</ul>
</header>
</body>
</html>
CSS
body {
background-color: black;
}
h1 {
font-family: 'Righteous', cursive;
text-align: center;
color: white;
font-size: 72px;
font-style: normal;
font-variant: normal;
font-weight: 500;
}
.nav ul {
font-family: 'Oswald', sans-serif;
list-style: none;
text-align: left;
padding: 50;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 45px;
height: 60px;
}
.nav a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
color: #fff;
display: block;
transition: .4s;
}
.nav a:hover {
color: black;
transition: .6s;
}
.Home a:hover {
line-height: 100%;
font-size: 60px;
background-color: rgb(244, 51, 0)
}
.Purchase a:hover {
line-height: 100%;
font-size: 60px;
background-color: rgb(244, 153, 0)
}
.Products a:hover {
line-height: 100%;
font-size: 60px;
background-color: rgb(255, 204, 0)
}
.SoggyNotions a:hover {
line-height: 110%;
font-size: 60px;
background-color: rgb(204, 204, 0)
}
如果您查看代码，我真正需要的是当鼠标悬停在链接上时链接右侧出现在彩色条中的额外文本。谢谢，麻烦您了。 这是我在网站上提出的第一个问题，如果有任何问题，请提请我注意。
最佳答案
为此目的，您可以将标题添加到 anchor 元素。
<a href="url" title="Details about link">Text</a>
关于jquery - 文本出现在链接的右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32853927/