커서를 이미지 위로 가져 가면 텍스트 표시

Question

커서를 가져 가면 이미지 아래에 텍스트가 표시되는 작업을 수행하려고합니다. 스타일을 지정할 수 있기를 원하기 때문에 title 속성을 사용하고 싶지 않습니다. 예 : Dribbble. 일부 그림 위로 마우스를 가져 가면 PRO이 그림을 게시 한 사람의 이름 옆에 표시됩니다.

Answer 1

체크 아웃이 빠른 JS FIDDLE

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

.

귀하의 HTML

<ul> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption"><span>this is my caption</span></div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
</ul> 

CSS는

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;} 
ul li div{display:none; background:white; opacity:.5; position:absolute;} 

하고 이것은 당신에게 당신이 찾고있는 무엇을 달성하는 방법의 아이디어를 줄 것이다

$('ul li').mouseenter(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeIn(); 
}).mouseleave(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeOut(); 
}); 

자바 스크립트. 분명히 개선 될 수 있습니다. 희망이 도움이됩니다.

Answer 2

div에 텍스트를 입력하고 다음과 같이 이미지의 풍선 위에 div를 표시하십시오.

<div id="div">Hiiii</div> 
$('#img').live('mouseover', function(){ 
$('#div').show(); 
}); 

Answer 3

인수를 사용하여 이미지를 가리 키도록 표시 할 텍스트로 함수를 정의하십시오. 그 함수에서 동적으로 div를 만들고 해당 div 내에 텍스트를 배치하고 마우스 포인터 위치에 따라 div를 동적으로 배치합니다. div에 CSS 스타일을 추가하여 CSS 스타일러스 효과를 추가 할 수도 있습니다. 이미지의 마우스 오버시이 함수를 호출하십시오. 희망이 도움이됩니다.

Answer 4

당신은 jquery 툴팁을 사용해야한다고 생각합니다. 다음은 최고의 툴팁 플러그인을 찾을 수있는 링크입니다.

http://slodive.com/web-development/best-jquery-tooltip-plugins/

Answer 5

$(function() { 

    $('.bar').css({opacity:0}); 

    $('.foo').hover(function() { 
     $('.bar').stop().animate({ 
      opacity: 1 
     },'fast'); 
    },function() { 
     $('.bar').stop().animate({ 
      opacity: 0 
     },'fast'); 
    }); 

}); 

Answer 6

은 어쩌면 내가 생각이 http://jsfiddle.net/konglie/SXFEn/