如何更改锚标签中title属性的样式？
如何更改锚标签中title属性的样式？
提问于 2010-01-06 13:33:54
示例：
<a href="example.com" title="My site"> Link </a>如何在浏览器中更改"title“属性的显示方式？默认情况下，它只有黄色背景和小字体。我想把它放大并改变背景颜色。
有没有一种CSS方法来设置title属性的样式？
回答 7
Stack Overflow用户
发布于 2010-01-06 13:56:15
下面是一个如何做到这一点的示例：
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
Stack Overflow用户
发布于 2010-01-06 13:39:02
CSS无法更改工具提示外观。它依赖于浏览器/操作系统。如果您想要一些不同的东西，那么当您将鼠标悬停在元素上时，您将不得不使用Javascript来生成标记，而不是默认的工具提示。
Stack Overflow用户
发布于 2016-01-29 03:02:57
我在这里找到了答案：http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
我自己的代码是这样的，我更改了属性名称，如果您维护属性的标题名称，您最终会看到同一文本有两个弹出窗口，另一个更改是悬停时的文本显示在显示的文本下面。
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}<a class="tags" gloss="Text shown on hovering">Exposed text</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2011142
复制相关文章
相似问题