Html 使用 css 为图像标题属性设置样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11672946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
styling an image title attribute using css?
提问by Peeyush Kushwaha
I want to style the text we see when we hover over the image. I tried the following but it won't work:
我想为我们将鼠标悬停在图像上时看到的文本设置样式。我尝试了以下但它不起作用：
<body>
<img src="img.jpg" title = "<span class='title'> title </span>
</body>
My style is in head. I wonder why it's being shown as plain text and why style isn't working.
我的风格是head. 我想知道为什么它显示为纯文本以及为什么样式不起作用。
回答by Peeyush Kushwaha
Nothing is impossible. edited the solution by Andres Ilichto the question: How to change the style of Title attribute inside the anchor tag?
没有什么是不可能的。编辑了 Andres Ilich对问题的解决方案：How to change the style of Title attribute inside the anchor tag?
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5);
}<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>回答by Diodeus - James MacFarlane
Title attributes in IMG tags cannot contain HTML, so you cannot do this.
IMG 标签中的标题属性不能包含 HTML，因此您不能这样做。
回答by XhkUnlimit
It is not possible directly in html, it will be in the future with the html5 figureand figcaptionelement, or it's possible using jquery !
See HtmlDoctorfor more informations on these elements !
不能直接在 html 中使用，将来可以使用html5figure和figcaption元素，或者可以使用 jquery ！有关这些元素的更多信息，请参阅HtmlDoctor！
回答by ter24
Another great fiddle is http://jsfiddle.net/tDQWN/129/(I can't take credit, but in the same search I found both posts). It's a similar solution but the styling is a bit fancier.
另一个很棒的小提琴是http://jsfiddle.net/tDQWN/129/（我不能相信，但在同一个搜索中我找到了两个帖子）。这是一个类似的解决方案，但样式有点花哨。
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-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);
}
And HTML:
和 HTML：
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" data-title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" data-title="This is another link">Mauris placerat</a> eleifend leo.</p>
Hope this helps someone!
希望这可以帮助某人！
回答by Abrar Jahin
You can do that by this way-
你可以通过这种方式做到这一点——
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;
left: 0px;
margin: 10px;
width: 250px;
position: relative;
top: -150px;
text-decoration: none
}<a href="#" class="tip">
<img src="http://www.w3schools.com/html/pic_mountain.jpg">
<span>This is the CSS tooltip showing up when you mouse over the link</span>
</a>回答by Yannick Blondeau
If what you want to do is display a text when the mouse hovers an image, you can do something using CSS :hoverstate.
如果您想要做的是当鼠标悬停在图像上时显示文本，您可以使用 CSS:hover状态做一些事情。
Such a solution is described in this blog post.
此博客文章中描述了此类解决方案。
回答by 0b10011
From the HTML spec(emphasis mine):
从HTML 规范（强调我的）：
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
title 属性表示元素的建议信息，例如适合工具提示的信息。在链接上，这可以是目标资源的标题或描述；在图像上，它可以是图像来源或图像描述；对于一个段落，它可以是对文本的脚注或评论；在引用上，它可能是有关来源的更多信息；在交互式内容上，它可以是元素使用的标签或说明；等等。值为文本。
Ergo, only textis allowed in the titleattribute. For a custom HTML tooltip, you must use a custom solution, such as hiding the content by default and showing it on :hoverwith CSS, or using JavaScript to pull from a data-...attribute.
因此，属性中只允许使用文本title。对于自定义 HTML 工具提示，您必须使用自定义解决方案，例如默认隐藏内容并:hover使用 CSS显示它，或使用 JavaScript 从data-...属性中提取。
