Question

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

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

我希望内容跟随我的鼠标，因为它也在徘徊。由于某些原因我使用的代码悬停在html上时，当我移动鼠标时，它会闪烁。任何想法为什么会这样？在某些浏览器（如Chrome和FF）中看起来更平滑，但IE显得不稳定。

示例：torhead.com/items将鼠标悬停在任何项目上

Answer 1

有很多方法。这是我睡眠不足头脑中的一个：

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

Answer 2

您是否只想显示工具提示？在这种情况下，“标题”属性就足够了：

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

Answer 3

你可以在这里使用像这样的jQuery插件：http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

Answer 4

这可以为您提供所需的工具提示随鼠标光标移动：

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

显示html悬停在图像上

4 个答案: