Question

我想在悬停时链接旁边显示更多文字，就像这样;

链接---文字进一步解释链接

我使用了几种方法，但没有一种是我需要的。到目前为止，这是我的代码;

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)
}

如果您查看代码，我需要的是链接右侧的额外文本，以便在链接悬停时显示在彩色条中。谢谢，麻烦您了。这是我在网站上提出的第一个问题，所以如果有任何错误请引起我的注意。

Answer 1

你可以为这个目的的锚元素添加标题。

<a href="url" title="Details about link">Text</a>

Answer 2

仅使用css很容易实现。

参见示例JSFiddle

简化标记：

<ul class="nav">
    <li class="Home"><a href="#">Home<span>Additional Text Explaining the link</span></a></li>
</ul>

CSS：

ul.nav a {
    position: relative;
}

ul.nav a span {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
}

ul.nav a:hover span {
    display: block;
    width: 220px;
}

.Home a:hover {
    line-height: 100%;
    font-size: 60px;
    background-color: rgb(244, 51, 0)
}

使用css动画，如果需要，可以使其具有各种效果（淡入淡出等）。

文字显示在链接

2 个答案: