이미지 호버에 커서 대신 텍스트 표시

Question

이미지 호버 위에 커서 대신 사용자 정의 텍스트를 표시하는 방법을 아는 사람 있습니까? 이상적으로 이것은 title 또는 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