标题属性中的img标签

Question

我已经读过这个问题： 如何在锚标记的title属性内添加图像标记？ 并且只有一个答案：“不可能”。 但是，我看到他们可以在此页面中执行此操作： 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

引用您链接到的问题的可接受答案

您需要对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

该标题属性中的图像标签已编码。 有了这个，您可以将任何所需的字符串放在锚点的标题标签中，但这并不意味着它是个好主意。 您可以使用javascript从您设置的任何数据属性中提取适当的图片网址，并获得相同的效果，只要您知道如何以合理的方式使用该网址即可。 至少以这种方式，您将遵循某种标准，而不仅仅是滥用html标准的意图以获取一些幻想。

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

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

Answer 4

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

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