youtube와 같은 이미지 마우스 오버시 텍스트

마우스가 위로 움직일 때 이미지 위에 텍스트를 표시하려면 어떻게해야합니까?youtube와 같은 이미지 마우스 오버시 텍스트

예를 들어 youtube에서 축소판 그림에 재생 목록 추가 버튼이 있습니다. 비슷한 버튼을 설정하는 것과 비슷하지만 어떻게 설정할 수 있습니까?

툴팁을 찾고 있지 않습니다. 마우스를 마우스로 가리키면 텍스트가 이미지에 표시됩니다. 당신이 tipsy 찾고있는

2011-08-09 Anush

당신은'title'의 HTML 속성을 고려할 수를 단순한. –

각 이미지를 별도의 "컨테이너"div 안에 넣으십시오. 이 div는 position : relative 속성을 가져야합니다. 모든 이미지에 클래스 이름 'singleImage'를 지정하십시오. position : absolute를 가진이 "container"div의 각각에 다른 div를 넣고 none을 표시하십시오. 이 div의 클래스 이름을 'toolTip'으로 설정하십시오. 이 div는 툴팁이 될 것입니다. 이미지에 제목 속성을 추가하십시오. 당신은 장비까지 호버링 또는 일반 자바 스크립트로 jQuery를해야합니다 경우 모험 당신의 느낌

당신은 같은 것을 할 것 jQuery를에 : 당신이 뭔가를 찾고 있다면

가

$('.singleImage').mouseover(function(){ 
    var tt = $(this).parent().find('.toolTip'); 
    tt.html($(this).attr('title')); 
    tt.show(); 
}); 
$('.singleImage').mouseout(function(){ 
    var tt = $(this).parent().find('.toolTip'); 
    tt.hide(); 
});

출처

2011-08-09 23:32:28