如何更改锚标签中的Title属性的样式？ [英] How to change the style of Title attribute inside the anchor tag?

问题描述

示例：

<a href="example.com" title="My site"> Link </a>

如何更改title属性。默认情况下，它只有黄色背景和小字体。

How do I change the "title" attribute. By default, it just has yellow background and small font. I would like to make it bigger and change background color.

[edit]标题属性是否有CSS设置？

[edit] Is there CSS setting for the title attribute?

推荐答案

使用CSS3现在可以很容易地使用content属性来设置 title 属性的样式。这是一个简短的演示：

With CSS3 it is now possible to style the title attribute quite easily using the content property. Here is a short demo:

CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -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);
}

演示 http://jsfiddle.net/tDQWN/

这篇关于如何更改锚标签中的Title属性的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！