使圖像顯示在懸停上

我正在嘗試製作一個工具提示系統，如果鼠標懸停在屬性爲tooltip（將評估爲圖像路徑）的跨度元素上，圖像將顯示在屏幕的右上方。使圖像顯示在懸停上

<style> 
    span[tooltip]:hover:after{ 
     content: attr(tooltip); 
     margin-left:auto; 
     } 
</style> 
<p><span tooltip='url("graphics/new_folder")'>Click "New">"Folder upload"</span> and upload the folder from its location</p>

只是呈現的span元素之後的文本url("graphics/new_folder")。用content:url("graphics/new_folder")代替content: attr(tooltip);即可顯示圖像，但造型與其交互很奇怪。給它position:fixed,float:right和float:top不僅不改變其位置，而且從視口的角度不影響圖像。給予它height和width值也奇怪地與定位一起玩。

所以，多的問題在這裏：

我怎樣才能讓content:attr(tooltip)有效地渲染圖像？
如何使屬性正確應用於圖像/將圖像置於屏幕的右上方？
我是否忘記了可以做到這一點的API？我希望有一個存在，但找不到一個。

我一直在努力解決這個問題，現在我非常感謝！

來源

2016-03-28 Code M4aster

您必須將圖像標籤與需要懸停應該有一個onMouseover事件與document.getElementById('open').style.display=呼叫教導幫助標籤元素設置爲<img src='my_image' style='display:none;' id='open'>

現在。

來源

2016-03-28 02:52:42

你不能這樣做的css content:attr()你必須使用<img src="">內跨度和比懸停在它的圖像將顯示，但你不能這樣做通過css content:attr()。

替代ü可以用做同樣的事情data的Attr即data-tooltip="graphics/new_folder"

來源

2016-03-29 11:49:24

你能否澄清？我將使用什麼CSS來使用值'data- *'？關於'data- *'的MDN用戶指南說要使用attr（）。 –

https://jsfiddle.net/mhmpretx/1/看到這個小提琴@ CodeM4aster –

使圖像顯示在懸停上

回答

相關問題