html - 如何更改 HTML 跨度标题字体大小？

Question

我正在尝试更改跨度标题元素的字体大小。我在谷歌上搜索了一个很好的例子，我找到了这个:link

但即使标题显示在灰色工具提示中，第二个也会出现:

我的问题是:如何通过增加字体大小来设置第二个工具提示(黄色)的样式？

我的跨度看起来像这样:

<span title=${code} ></span>

Answer 1

我已经测试了你的 fiddle ，这个问题似乎只发生在 FireFox 上。只需显示 1 个框(内容用 CSS 编写)和浏览器标准的 title 属性，它们会在悬停时显示。

如果您不关心真正的“title”属性，您可以使用这样的解决方法:http://jsfiddle.net/tDQWN/9078/

只需更改 3 行代码:

HTML 的输出:

<span title=${code} ></span>

以及 :after 内容的 CSS:

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

简单来说，我只是更改了“data-title”属性中的“title”属性。在这种情况下，浏览器不会输出那个小标题文本，因为它不是标准的“标题”属性。现在你只需要制作一个盒子的样式。