将HTML悬停在图像上

-3

当我将鼠标悬停在图像上时，如何显示呈现的HTML内容。例如将HTML悬停在图像上

<img src="test.jpg" onmouseover="show('<b>This is bold text</b>')" onmouseout="hidetext()" />

我想内容跟随我的鼠标，因为它也一样。随着代码我出于某种原因，通过鼠标移动鼠标悬停在html上方会闪烁。任何想法为什么发生这种情况？在Chrome和FF等浏览器中似乎更流畅，但IE浏览器却不稳定。

例子：torhead.com/items把你的鼠标在任何项目

来源

2012-01-08 user1130861

你对你想要什么有更多的想法吗？你能描述一下你的意思吗？你的意思是你想要一些HTML元素悬停并覆盖图像？或者只是在网页上随意出现的东西？ – 2012-01-08 08:47:35

任意数量的方式的。这里有一个从我的睡眠剥夺的头顶：

<img src="test.jpg" class="hastooltip" /> 
<div> 
    This is the HTML content to show when the image is moused over. 
    It will appear just to the bottom-right of the image (though this can be changed) 
</div>

然后在你的样式表：

.hastooltip + div { 
    display: none; 
    position: absolute; 
    /* margin-left: -100px; margin-top: -50px; 
    Adjust and un-comment these margins to move the tooltip */ 
    border: 1px solid black; 
    background-color: white; 
} 
.hastooltip:hover + div, .hastooltip + div:hover { display: block; }

宾果。没有JavaScript要求;）

来源

2012-01-08 08:46:52

对不起，应该有更详细的解释，我希望它跟随我的鼠标滚动 – user1130861 2012-01-08 08:48:28

那么这就是事情变得更加复杂的地方。幸运的是，Google上有很多例子。对不起，太累了，现在没有太多的帮助= _ = - （zzz） – 2012-01-08 08:50:02

+1好玩。没有JavaScript总是一个巨大的优势。 – 2012-01-08 08:52:55

您是否想要显示工具提示？在这种情况下，一个“title”属性就足够了：

<img src="test.jpg" title="<html></html" />

来源

2012-01-08 08:47:26

标题将显示html并将其呈现为HTML？但我希望它也能跟随鼠标 – user1130861 2012-01-08 08:49:32

“跟随鼠标”是什么意思？ – 2012-01-08 08:50:30

http://www.torhead.com/items将您的鼠标放在任何物品上 – user1130861 2012-01-08 08:51:32

您可以使用一个jQuery插件，这样的位置：http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

来源

2012-01-08 08:51:39 Veronica

非常感谢！ :) – user1130861 2012-01-08 08:57:44

这应该给你你想要什么，用工具提示用鼠标移动光标：

<script type="text/javascript"> 
    function showTooltip(e, tooltip) 
    { 
     e = window.event ? window.event : e; 
     tooltip = document.getElementById(tooltip); 
     if(tooltip.style.display != "block") 
      tooltip.style.display = "block"; 
     tooltip.style.left = event.clientX + "px"; 
     tooltip.style.top = event.clientY + "px"; 
    } 

    function hideTooltip(e, tooltip) 
    { 
     e = window.event ? window.event : e; 
     tooltip = document.getElementById(tooltip); 
     if(e.toElement == tooltip) 
     { 
      showTooltip(e, tooltip); 
      return; 
     } 
     tooltip.style.display = "none"; 
    } 
</script> 
<div> 
<img alt="" src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" class="hastooltip" onmousemove="showTooltip(event, 'dvTooltip');" onmouseout="hideTooltip(event, 'dvTooltip');" /> 

<div id="dvTooltip" style="display:none;position:absolute;background-color:#fff;" onmousemove="showTooltip(event, 'dvTooltip');"> 
    This <b>is</b> <i>HTML</i>. 
</div>

来源

2012-01-08 09:01:25

你摇滚的人，我得到一个闪烁的问题与翻转可以检查出来吗？ http://www.swtorprogress.com/characters/?id=109把你的鼠标放在字符左边的50x50图像 – user1130861 2012-01-08 09:24:14

不像鼠标一样用鼠标滚动 – user1130861 2012-01-08 09:36:57

我已经编辑它来修复闪烁并跟随问题，通过添加一个onmousemove事件到工具提示div以及:) – 2012-01-08 10:50:06

将HTML悬停在图像上

回答

相关问题