懸停上的顯示框

Question

我對web開發相當陌生，我被要求創建一個只顯示懸停在圖像上的框（靜態圖標），並顯示我的代碼塊（facebook likebox，動態qr代碼圖標等）。你能幫我找到最優雅的解決方案嗎？

任何幫助表示讚賞！

Answer 1

你可以通過CSS本身做到這一點。雖然有很多插件，但我們可以做這樣的事情。首先，你需要一個懸停元素，比如說在這種情況下，一個鏈接。

<a href="#">Hover Me!</a> 

接下來應該是工具提示。我們現在可以有一個<span>並將其放入鏈接。

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a> 

現在是真正的CSS部分。

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} 
a {position: relative;} 
a:hover span {display: block; text-align: center;} 

這只是純粹的CSS解決方案之一。你可以看到工作fiddle here。

---

但是，有很多插件，它們將這個概念作爲基礎，並且適用於懸停卡和工具提示。一些很好的例子包括：

• jQuery UI Tooltip
• Tipsy
• HoverCard
• 40+ Tooltips Scripts With AJAX, JavaScript & CSS

Answer 2

<img src="image.png" onmouseover='$("#div_content").show();' onmouseout='$("#div_content").hide();' /> 

<div id="div_content" style='width:100px;height:100px;display:none;'>Test data</div> 

你可以寫任何內容DIV之間，當您貿澤在其上會顯示當你從圖像中滑出圖像並隱藏圖像