Resimde görüntünün belirmesi belirir

Question

Bir araç ipucu sistemi yapmaya çalışıyorum; fare, tooltip özelliğiyle bir span öğesinin üzerinde geziniyorsa (bu, bir görüntünün yolunu değerlendirir), görüntü, Ekranın sağ üst köşesinde.

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

Basitçe span öğeden sonra metni url("graphics/new_folder") vermektedir. content:url("graphics/new_folder") ile content: attr(tooltip);'u değiştirmek görüntüyü görüntüler, ancak stil garip bir şekilde etkileşime girer. position:fixed, float:right ve float:top'u vermek yalnızca konumunu değiştirmez, aynı zamanda görüntüyü görünümün perspektifinden etkilemez. height ve width değerlerinin verilmesi, konumlandırmanın da garip bir şekilde oynatılmasıyla sonuçlanır. Burada

Yani, birden soruları: Ben content:attr(tooltip) etkili bir görüntüyü oluşturulmasını sağlayabilir nasıl

1. ?
2. Görselleri görüntüye düzgün bir şekilde nasıl uygulayabilirim/görüntüyü ekranın sağ üst köşesinde alabilirim?
3. Bunu yapabilecek bir API'ya karşı habersiz miyim? Birinin var olmasını beklerdim ama bulamaz.

Şimdi bir süredir bununla uğraşıyorum, yardım çok takdir edilecektir!

Answer 1

Bunu olur öğretti document.getElementById('open').style.display= çağrısıyla bir onMouseover etkinliği olmalıdır gezinip gerektirir tag ögesi ile Şimdi <img src='my_image' style='display:none;' id='open'>

olarak resim etiketi ayarlamak zorunda kalacaktır. Eğer yayılma içine <img src=""> kullanmak zorunda ve üzerinde gezdirin dışındaki resim gösterecektir ancak css content:attr() tarafından bunu yapamaz content:attr() Sen css ile bunu yapamaz

Answer 2

.

Alternatif u kullanarak aynı şeyi yapabilir data Attr yani