7

我想为我们将鼠标悬停在图像上时看到的文本设置样式。我尝试了以下方法，但它不起作用：

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

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

4

7 回答 7

29

没有什么是不可能的。将 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>

于 2012-07-26T16:36:07.520 回答
6

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

于 2012-07-26T15:40:23.070 回答
2

直接在 html 中是不可能的，它将在未来使用 html5figure和figcaption元素，或者使用 jquery 是可能的！有关这些元素的更多信息，请参阅HtmlDoctor！

于 2012-07-26T15:45:06.080 回答
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>

希望这对某人有帮助！

于 2014-01-17T19:38:56.027 回答
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>

于 2016-12-01T09:28:33.807 回答
0

从HTML 规范（强调我的）：

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

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

于 2012-07-26T15:43:14.380 回答
0

如果您想要在鼠标悬停图像时显示文本，您可以使用 CSS:hover状态执行某些操作。

此博客文章中描述了这样的解决方案。

于 2012-07-26T15:47:54.303 回答