在鼠標懸停時顯示帶有文本和圖形的彈出窗口

Question

我想要一個彈出窗口，以便當用戶將鼠標懸停在圖像上時，它將在圖像右側顯示該彈出窗口。 該窗口將包含文本和圖形。 當鼠標移出圖像時，窗口應關閉。 我嘗試了Internet上的各種腳本，但是它們將文本顯示為同一頁面的innerhtml。 這樣就破壞了我的原始頁面。 有沒有辦法讓我將鼠標懸停在圖像上時將帶有文本和圖形的框抬起，並在關閉圖像時使其消失？

Answer 1

查看jQuery qtip- http://craigsworks.com/projects/qtip/

演示： http : //craigsworks.com/projects/qtip/demos/

---

編輯：示例代碼（直接從QTip的演示站點）。 這將產生在http://craigsworks.com/projects/qtip/demos/content/basic上看到的效果

<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});
</script>

Answer 2

如果只需要捕獲mouseover和mouseleave事件，也許如果目標瀏覽器允許的話，您應該只嘗試在image或div上僅使用CSS和：hover選擇器。