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

Question

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

我想在我们将鼠标悬停在图像上时看到的文字样式.我尝试了以下但它不起作用:

<body>
    <img src="img.jpg" title = "<span class='title'> title </span>
</body>

Run Code Online (Sandbox Code Playgroud)

我的风格是head.我想知道为什么它被显示为纯文本以及为什么样式不起作用.

Answer 1

Pee*_*aha 19

没有什么是不可能的.编辑Andres Ilich解决方案的问题:如何更改锚标记内Title属性的样式？

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);
}

Run Code Online (Sandbox Code Playgroud)

<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dio*_*ane 5

IMG标记中的标题属性不能包含HTML,因此您无法执行此操作.

没有什么是不可能的 (5认同)
是的,我想用1亿美元你可以贿赂所有浏览器制造商,让它们按照你想要的方式工作.我想这会使这成为可能.在现实世界中,它不是. (3认同)
我找到了答案.并自己回答了这个问题.如果你不相信,请检查一下 (3认同)
你要求不可能的事. (2认同)

归档时间：	13 年，4 月前
查看次数：	58471 次
最近记录：	6 年，4 月前