例子:
<a href="example.com" title="My site"> Link </a>
我如何改变“标题”属性在浏览器中的表示?默认情况下,它只有黄色背景和小字体。我想把它做大一点,并改变背景颜色。
是否有CSS方法来样式标题属性?
例子:
<a href="example.com" title="My site"> Link </a>
我如何改变“标题”属性在浏览器中的表示?默认情况下,它只有黄色背景和小字体。我想把它做大一点,并改变背景颜色。
是否有CSS方法来样式标题属性?
当前回答
本机工具提示不能设置样式。
也就是说,你可以使用一些库,在元素悬停时显示样式浮动层(而不是本地工具提示,并抑制它们),只需要很少或根本不需要修改代码……
其他回答
CSS不能改变工具提示的外观。它依赖于浏览器/操作系统。如果你想要一些不同的东西,你必须使用Javascript来生成标记,当你把鼠标悬停在元素上,而不是默认的工具提示。
这里有一个用于自定义工具提示模式的jsfiddle
它基于CSS定位和伪类选择器
检查MDN文档以获得伪类的跨浏览器支持
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
看起来实际上有一个纯CSS的解决方案,只需要CSS attr表达式,生成的内容和属性选择器(这表明它可以追溯到IE8):
https://jsfiddle.net/z42r2vv0/2/
一个{ 位置:相对; 显示:inline-block; margin-top: 20 px; } 【标题】:{后盘旋:: 内容:attr(标题); 位置:绝对的; 上图:-100%; 左:0; } <a href="http://www.google.com/" title="Hello world!"> 盘旋在我身边 < / >
update w/ input from @ViROscar:请注意,没有必要使用任何特定的属性,尽管我在上面的例子中使用了“title”属性;实际上我的建议是使用“alt”属性,因为有一些机会,内容将被无法从CSS受益的用户访问。
再次更新,我没有改变代码,因为“title”属性基本上意味着“tooltip”属性,这可能不是一个好主意,隐藏重要的文本在一个字段中,只有在hover可访问,但如果你有兴趣使这个文本可访问,“aria-label”属性似乎是最好的地方:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
下面是一个如何做到这一点的例子:
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>
a[title="My site"] {
color: red;
}
这也适用于你想添加的任何属性,例如:
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"] {
color: red;
}
查看它的工作:http://jsfiddle.net/vpYWE/1/