标题属性中的img标签 [英] img tag within title attribute

问题描述

我读过这个问题：如何在锚标签的标题属性中添加图片标签？并且只有一个答案：不可能。但是，我看到他们可以在此页面中执行此操作： http：// truyen。

我查看了网页的源代码，并得到：

 < a href =/ Truyen / Citrus-Saburo-Uta？id = 7048title ='
< img width =120height = 165src =http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpgstyle =float：left; padding-right：10px/> 
< div style =float：left; width：300px> 
< a class =bigCharhref =/ Truyen / Citrus-Saburo-Uta>柑橘（Saburouta）< / a> 
< p> 
 Nh& acirc; nvậtch& iacute; nh Yuzuko，ngay ng& agrave; yđầuti& ecirc; nchuyểntrườngđ& atilde; đụngmặtv& agrave; kh& ocirc; ngmấycảmt& igrave; nhvớiMei  - hộitrưởnghộihọcsinh& nbsp;trườngmới，trong ... 
< / p> 
< / div>'> 
 Citrus（Saburouta）< / a> 
  

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

属性 - 它必须是自定义的。

对于纯粹的CSS解决方案（不涉及JavaScript和鼠标悬停事件），您可以将DIV与工具提示内容放在一起到你的链接，将其样式设置为display：none，然后给你的锚定样式，如：

  a：hover + div {
 display：block！important 
} 
  

这将选择DIV辅助链接和使其可见，只有当您将鼠标悬停在链接上时 。您可以通过针对特定链接而不是所有这些链接来将其更细化。

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

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net

I viewed the page's source and got:

<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>

but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?

解决方案

As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.

For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like

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

this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.

Here is the demo: http://jsfiddle.net/4WZvL/

这篇关于标题属性中的img标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！