Question

我读过这个问题：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脚本，还是类似的东西？

Answer 1

引用accepted answer引用您链接到

的问题

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

他们使用自定义工具提示看起来像效果。

Answer 2

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

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

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

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

以下是演示：http://jsfiddle.net/4WZvL/

Answer 3

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

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

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

Answer 4

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

使用数以千计的Javascript工具提示插件中的一个。这是jQuery的加载：https://www.google.co.uk/search?q=jquery+tooltip+plugin

title属性中的img标签

4 个答案: