在圖像懸停上顯示文本而不是光標

Question

有沒有人知道在圖像懸停上顯示自定義文本而不是光標的方法？理想情況下，這將是一個標題或alt屬性表單圖像。

如果沒有任何方法來顯示光標下的文本？

我只需要一個接近正常的標題屬性行爲的東西，我只是需要它立即顯示，並與我的styliong。

注：我知道這樣說：

a[title]:hover:after { 
    content: attr(title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute;... 

遺憾的是它的圖像之後顯示的標題，我需要它在圖像上，如光標移動:)

任何幫助，將不勝感激

thanx !!

Answer 1

你可以做到這一點jQuery的是這樣的：

var title = ""; 
$(document).mousemove(function (e) {  

    $(".image_container").each(function(i, v){ 

     var container = v; 
     var img = $(this).children()[0]; 

     if((e.pageY < $(img).offset().top || 
      e.pageY > $(img).offset().top + $(img).height() || 
      e.pageX < $(img).offset().left || 
      e.pageX > $(img).offset().left + $(img).width())){ 

      if($(container).children().length == 2){ 
       $(container).children()[0].title = $($(container).children()[1]).html(); 
       container.removeChild($(container).children()[1]); 
      } 

     } 
     else{ 
      if($(container).children().length == 1){ 
       console.log("printing title"); 
       title = $("<div class='img_title'>" + $(container).children()[0].title + "</div>"); 
       $(container).children()[0].title = ""; 
       $(container).append(title); 
      } 
      title.offset({ 
       top: (e.pageY ? e.pageY : e.clientX), 
       left: (e.pageX ? e.pageX : e.clientY) 
      }); 
     } 
    }); 

}); 

，並用CSS

.img_title { 
    display: table; 
    background: #888888; 
    position: absolute; 
} 
.image_container { 
    cursor: none; 
    display: table;  
} 

，並把這樣的圖片：

<div class="image_container"> 
    <img src="url" title="Text to follow mouse on hover" /> 
</div> 

看看這裏：JSFiddle