如何更改锚标记内标题属性的样式? [英] How to change the style of the title attribute inside an anchor tag?

问题描述

示例:

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

如何更改浏览器中title"属性的显示方式?.默认情况下，它只有黄色背景和小字体.我想把它放大并改变背景颜色.

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

是否有 CSS 方法来设置标题属性的样式?

Is there a CSS way to style the title attribute?

推荐答案

看来其实有一个纯 CSS 的解决方案，只需要 css attr 表达式、生成的内容和属性选择器(其中表明它可以追溯到 IE8):

It seems that there is in fact a pure CSS solution, requiring only the css attr expression, generated content and attribute selectors (which suggests that it works as far back as IE8):

https://jsfiddle.net/z42r2vv0/2/

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

update 来自@ViROscar 的输入:请注意，虽然我使用了title"，但没有必要使用任何特定的属性.上例中的属性；实际上我的建议是使用alt"属性，因为无法从 CSS 中受益的用户有可能访问内容.

update w/ input from @ViROscar: please note that it's not necessary to use any specific attribute, although I've used the "title" attribute in the example above; actually my recommendation would be to use the "alt" attribute, as there is some chance that the content will be accessible to users unable to benefit from CSS.

再次更新 我不会更改代码，因为标题"属性基本上意味着工具提示".属性，并且将重要文本隐藏在只能在悬停时访问的字段中可能不是一个好主意，但是如果您有兴趣使此文本可访问，请使用aria-label"属性似乎是它的最佳位置:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

update again I'm not changing the code because the "title" attribute has basically come to mean the "tooltip" attribute, and it's probably not a good idea to hide important text inside a field only accessible on hover, but if you're interested in making this text accessible the "aria-label" attribute seems like the best place for it: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

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