标题属性中的 img 标签答案

【问题标题】：img tag within title attribute标题属性中的 img 标签
【发布时间】：2013-09-18 01:28:44
【问题描述】：

我已经阅读了这个问题：How to add image tag inside title attribute of an anchor tag? 并且只有一个答案：“不可能”。但是，我看到他们可以在这个页面中做到这一点：http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net

我查看了页面的来源并得到：

<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
            <img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
            <div style="float: left; width: 300px">
                <a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
                <p>
                    Nh&acirc;n vật ch&iacute;nh Yuzuko, ngay ng&agrave;y đầu ti&ecirc;n chuyển trường đ&atilde; đụng mặt v&agrave; kh&ocirc;ng mấy cảm t&igrave;nh với Mei - hội trưởng hội học sinh ở &nbsp;trường mới, trong ...
                </p>
            </div>'>
            Citrus (Saburouta)</a>

但是当我将这些 html 代码放在我的网站上时，图像没有显示。那么他们怎么能这样做呢？他们是在使用一些 js 脚本还是类似的东西？

【问题讨论】：

标签： javascript html

【解决方案1】：

正如其他人提到的，您不能将 HTML 内容放在“title”属性中 - 它必须是自定义的。

对于纯 CSS 解决方案（不涉及 JavaScript 和鼠标悬停事件），您可以将带有工具提示内容的 DIV 放置在链接旁边，将其样式设置为“显示：无”，并为您的锚点样式设置类似

a:hover + div {
   display: block !important
}

这将选择附加到链接的 DIV 并使其可见，但仅当您将鼠标悬停在链接上时。您可以通过定位特定链接而不是所有链接来使其更精细，如上面的代码。

这里是演示：http://jsfiddle.net/4WZvL/

【讨论】：

此外，您可以使用 css3 过渡来仅使用 css 在该弹出窗口上实现各种效果

【解决方案2】：

引用accepted answer 到您链接到的问题

您需要在 IMG insdie DIV 和 mouseHover 事件上使用自定义工具提示外观效果。

他们使用自定义工具提示外观效果。

【讨论】：

【解决方案3】：

该标题属性中的图像标签已编码。鉴于此，您可以在锚的标题标签中放置您想要的任何字符串，但这并不意味着这是一个好主意。只要您知道如何以合乎逻辑的方式使用该 url，您就可以使用 javascript 从您设置的任何数据属性中提取正确的图像 url 并达到相同的效果。至少这样你会遵循某种标准，而不仅仅是滥用 html 标准的意图来实现一些花哨的技巧。

Juhana 回答了您的问题。但是为了扩展这个概念，您可以轻松地使用数据属性、id 和类来为您需要的任何内容设置隐藏或以其他方式引用的 html 元素。如果想要的效果是使用您提供的链接中的图像弹出该块，您可以使用 css 隐藏元素，然后使用 javascript 取消隐藏它们。

如果您指定您的确切需求并展示您自己尝试解决的问题，有人可能会提供一个示例。

【讨论】：

【解决方案4】：

该 HTML 无效，尽管有可能，但这并不意味着您应该这样做。某些浏览器可能无法正确显示图像。

改用成千上万个 Javascript 工具提示插件之一。这是 jQuery 的负载：https://www.google.co.uk/search?q=jquery+tooltip+plugin

【讨论】：