Html 使用css设置图像标题属性的样式？

我想设置悬停在图像上时看到的文本的样式。我尝试了以下方法，但无效：

标题

---

我的风格是

head

。我想知道为什么它显示为纯文本，为什么样式不起作用。

IMG标记中的标题属性不能包含HTML，所以您不能这样做。

来自（我的重点）：

title属性表示元素的建议信息，例如适用于工具提示的信息。在链接上，这可以是目标资源的标题或描述；在图像上，它可以是图像信用或图像描述；在一个段落上，它可以是文本的脚注或评注；在引文上，可以是关于来源的进一步信息；在交互内容上，它可以是元素使用的标签或说明；等等值为文本。

---

因此，

title

属性中只允许文本。对于自定义HTML工具提示，必须使用自定义解决方案，例如默认情况下隐藏内容并在

上显示：使用CSS悬停
，或者使用JavaScript从
数据-…
属性中提取内容。
在HTML中不可能直接使用，它将在将来使用html5
figure
和
figcaption
元素，或者可以使用jquery！
有关这些元素的更多信息，请参阅
 如果要在鼠标悬停图像时显示文本，可以使用CSS
：hover
状态执行操作

此类解决方案如中所述。
没有什么是不可能的。编辑问题：


a{
颜色：#900；
文字装饰：无；
}
a:悬停{
颜色：红色；
位置：相对位置；
}
a[数据]：悬停：在{
内容：attr（数据）；
填充：4px8px；
颜色：rgba（0,0,0,0.5）；
位置：绝对位置；
左：0；
最高：100%；
空白：nowrap；
z指数：2；
边界半径：5px；
背景：rgba（0,0,0,0.5）；
}
另一个伟大的小提琴是
（我无法获得信任，但在同一次搜索中，我找到了两篇帖子）。这是一个类似的解决方案，但样式有点花哨

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>

佩伦特式居住者morbi tristique Sentecus et netus et malesuada是一个著名的土耳其人。侵权人、世仇、别有用心、临时诉讼、安特。不要让你的自由人坐在那里。我的生命是永恒的。埃利芬德·利奥


希望这对别人有帮助
 你可以这样做-


a.tip{
边框底部：1px虚线；
文本装饰：无
}
a、 提示：悬停{
光标：帮助；
职位：相对
}
a、 叶尖跨度{
显示：无
}
a、 提示：悬停跨度{
边框：#C0C0 1px虚线；
填充：5px20px 5px 5px；
显示：块；
z指数：100；
左：0px；
利润率：10px；
宽度：250px；
位置：相对位置；
顶部：-150px；
文本装饰：无
}
不能设置属性的样式，只能设置元素本身的样式。由于这两个问题处理的问题不同，因此不可能重复imo。不管技术解决方案是否相同。@PeeyushKushwaha您可能看到了某种工具提示applied@PeeyushKushwaha-你可能已经看到一个jQuery插件在工作。你在要求不可能的东西。是的，我想用1亿美元，你可以贿赂所有的浏览器制造商，让他们按照你想要的方式工作。我想这将使这成为可能。在现实生活中，不是这样。我已经找到了答案。我自己回答了这个问题。如果你不相信，那就检查一下。我不知道。谢谢你的解答！但是，最好不要使用aplpha背景，@Peeyush Kushwaha关于IE8，如何在IE8浏览器上使用它？我不确定IE8是否支持此功能，但如果不支持，则必须使用JS polyfill