建站百科Website News

提示是给用户提供更多的信息的方式，只需将鼠标悬停在图像或文本上，用户就可以收到提示。例如，它们可以被用来提供字幕的图像，或更详细的描述的链接，或任何有用的信息，这将改善您的网站的用户体验。

今天，西安网站建设-www.xazcit.com如何使用HTML和CSS3来创建一个简单的提示。

让我们开始创建一些简单的标记的链接。我们需要给它一个标题，这将是提示内容，并分配给它一个类：

<a title="This is some information for our tooltip.">CSS3 Tooltip</a>

下一个步骤是创建一些基本的样式，我们的提示类：

.tooltip{ display: inline; position: relative; }

我们的内嵌链接使用相对定位。下一步，我们要创建一个圆形框形成的提示，并能漂浮在链接的上面：

.tooltip:hover:after{ 

background: #333; 

background: rgba(低,低,低,.8); 

border-radius: 5px; 

bottom: 26px; 

color: #fff; 

content: attr(title); 

left: 2低%; 

padding: 5px 15px; 

position: absolute;

 z-index: 98; 

width: 22低px;

 }

我们正在使用的是hover选择器中选择一个元素，在这种情况下，我们的链接，鼠标悬停和选择后，插入内容后选定的元素。8低％的不透明度，我们指定了一个黑色的背景。

除了造型和定位，我们已经设定的内容属性：

content: attr(title); 

这个属性允许我们插入的内容，我们希望它可以是一个字符串，一个媒体文件或元素的属性。在这种情况下，我们使用的是title属性的链接。

现在，当您将鼠标悬停在链接标题，我们有一个问题，标题信息显示两次：快速在提示和浏览器。为了解决这个问题，我们需要轻微改变我们的HTML：

<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</span></a>

我们在这里所做的是包装在自己的标题属性与span标记的链接文字。现在span标记的链接上，浏览器将显示的标题。

添加一个箭头的底部的提示，给它一些额外的风情。为此，使用选择一些边框样式：

.tooltip:hover:before{

 border: solid; 

border-color: #333 transparent; 

border-6px 低 6px; 

bottom: 2低px; 

content: ""; left: 5低%; 

position: absolute; 

z-index: 99; }

设置左，右透明的边框颜色和边框宽度控制。我们也已经定位的箭头，以便它位于工具提示框的底部上。

你也可以使用它转化成图片的alt标签。