如何更改锚标签内标题属性的样式?

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 方法来设置 title 属性的样式?

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>

更新 w/@ViROscar 的输入:请注意，没有必要使用任何特定属性，尽管我使用了标题".上例中的属性；实际上我的建议是使用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

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