如何使用CSS为图像标题属性设置样式？

Question

如何使用CSS为图像标题属性设置样式？

9

我希望能够在鼠标悬停在图片上时，改变所显示文本的样式。但我尝试了以下方法，却没有起作用：

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

我的样式在 head 中。我想知道为什么它显示为纯文本，而且样式无法生效。

- Peeyush Kushwaha

不能为属性设置样式，只能为元素本身设置。 - j08691

可能是如何更改锚标记内Title属性的样式？的重复问题。 - Abrar Jahin

2

不是重复问题，因为两个问题涉及不同的问题。如果技术解决方案恰好相同也无所谓。 - Peeyush Kushwaha

7个回答

6

IMG标签中的标题属性不能包含HTML，因此您不能这样做。

- Diodeus - James MacFarlane

这是一个JavaScript工具提示，它覆盖了悬停功能并公开了一个可以进行样式设置的隐藏元素。 - Mike Brant

好的，去偷他们的代码吧。你很可能会发现他们使用了 JavaScript 来进行黑客攻击。 - Diodeus - James MacFarlane

2

你在要求不可能的事情。 - Diodeus - James MacFarlane

3

嗯，我猜如果你有1亿美元，你可以贿赂所有浏览器制造商，让他们按你的意愿工作。我猜这样可能会使这成为可能。但在现实的当下世界中，并不是这样的。 - Diodeus - James MacFarlane

3

我已经找到了答案，并在这个问题上自己回答了它。如果你不相信，可以检查一下。 - Peeyush Kushwaha

显示剩余3条评论

2

无法直接在HTML中实现，但在未来的HTML5中可以使用figure和figcaption元素实现，或者可以使用jQuery！有关这些元素的更多信息，请参见HtmlDoctor！

- XhkUnlimit

1

另一个很棒的代码示例是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>

希望这能帮助到某个人！

- ter24

1

你可以通过以下方式实现这一点 -

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>

- Abrar Jahin

0

来自HTML规范（重点在我）：

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

因此，在title属性中只允许文本。对于自定义HTML工具提示，您必须使用自定义解决方案，例如默认情况下隐藏内容，并使用CSS在:hover上显示它，或者使用JavaScript从data-...属性中提取。

- 0b10011

0

如果您想在鼠标悬停在图像上时显示文本，您可以使用CSS的:hover状态来实现。这篇博客文章描述了这样的解决方案。

- Yannick Blondeau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peeyush Kushwaha · Accepted Answer

没有什么是不可能的。编辑了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);
}

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