我想为我们将鼠标悬停在图像上时看到的文本设置样式。我尝试了以下方法，但它不起作用：
<body>
<img src="img.jpg" title = "<span class='title'> title </span>
</body>
我的风格是head。我想知道为什么它显示为纯文本以及为什么样式不起作用。
【问题讨论】：
没有什么是不可能的。编辑the solution by 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>【讨论】：
IMG 标签中的标题属性不能包含 HTML，所以不能这样做。
【讨论】：
直接在 html 中是不可能的，它将在未来使用 html5 figure 和 figcaption 元素，或者使用 jquery 是可能的！
有关这些元素的更多信息，请参阅HtmlDoctor！
【讨论】：
另一个很棒的小提琴是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);
}
还有 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>
希望这对某人有所帮助！
【讨论】：
你可以这样做-
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>【讨论】：
来自HTML spec（强调我的）：
title 属性表示元素的建议信息，例如适合工具提示的信息。在链接上，这可以是目标资源的标题或描述；在图像上，它可以是图像信用或图像描述；在一个段落上，它可以是对文本的脚注或评论；在引文中，可能是有关来源的更多信息；在交互式内容上，它可以是元素使用的标签或说明；等等。 值为文本。
所以，title 属性中只允许 text。对于自定义 HTML 工具提示，您必须使用自定义解决方案，例如默认隐藏内容并使用 CSS 在 :hover 上显示，或使用 JavaScript 从 data-... 属性中提取。
【讨论】：
如果您想要在鼠标悬停图像时显示文本，您可以使用 CSS :hover state 来做一些事情。
this blog post 中描述了这种解决方案。
【讨论】：