將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懸停在圖像上

回答

相關問題