Question

有时我们可以为href链接添加提示，例如：

<a href="#" title="This link leads you to Page1">Page1</a>

当光标在链接上时，有时需要很长时间才能显示文本。是否可以使用纯CSS更改时间，持续时间甚至动画？

谢谢，

Answer 1

在css3中，您使用以下方式设置工具提示的样式：after＆amp;在元素中添加一个类。

CSS3

.tooltip:hover:after {
 background:rgba(0,0,0,0.7);
 color:#fff;
 content:attr(rel);
 display:block;
 margin-top:-42px;
 position:absolute;
 white-space:nowrap;
}

HTML

<a href="#" rel="This link leads you to Page1" class="tooltip">Page1</a>

http://jsfiddle.net/eRQLQ/

这是时间和时间延迟

.tooltip:after{ background:rgba(0,0,0,0.7); color:#fff; content:attr(rel); display:block; margin-top:-42px; position:absolute; white-space:nowrap; opacity:0; -webkit-transition:opacity 1s ease 2s; } .tooltip:hover:after{ opacity:1; -webkit-transition:opacity 1s ease 300ms; }

如果你想要更多支持，还要添加-moz，-ms和其他前缀。

打开/关闭时延迟300ms，持续时间为1s

http://jsfiddle.net/eRQLQ/1/

关闭延迟2s，持续时间1s

http://jsfiddle.net/eRQLQ/2/

修改

复杂

http://jsfiddle.net/eRQLQ/3/

编辑2

容器内的多个元素，包含图像arrtibute值和自定义text.less html。

http://jsfiddle.net/eRQLQ/8/

Answer 2

“标题”弹出窗口是为可访问性而设计的Web浏览器的一项功能。没有办法用CSS改变它，因为这与其作为辅助功能工具的目的背道而驰。那就是说，你可以创建自己的纯HTML / CSS工具提示，做你想做的事情

制作自己的工具提示的传统方法是使用JavaScript。 Twitter Boostrap框架有a good example，JavaScript库动态驱动器有a whole bunch。

您可以使用CSS :hover样式代替JavaScript，来制作自己的工具提示。最简单的方法是在每个<span class="tooltip">...</span>标记内放置一个<a>，并使用CSS定位它并根据需要设置样式。开始使用工具提示设计的一个很好的资源是http://csstooltip.com/。

如果您的用户使用的是现代浏览器，则可以将动画添加到自定义工具提示中。您可以考虑从已存在的库开始，例如Hint.css。

（最后一点：如果你做了这些事情，请记住，不使用title属性会对依赖此属性进行访问的用户产生负面影响。这可能是也可能不是问题您的目标用户，但绝对需要注意。如果您需要保持某种级别的辅助功能，可以考虑使用role="tooltip"添加到工具提示元素。有关详情，请参阅ARIA Specification有关使用role属性的辅助功能的详细信息。）

是否可以在<a> tag?</a>中自定义标题弹出窗口

2 个答案: