jquery+CSS를 사용하여 사용자 정의 태그 제목 프롬프트 도구 설명 예제 만들기

간단한 jquery+CSS를 사용하여 브라우저의 기본 동작을 대체하는 사용자 정의 태그 제목 프롬프트를 만듭니다. 그림과 같습니다.



Javascript 코드

코드는 다음과 같습니다.

$(function() { 
$("a[title]").each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == undefined || title == "") return; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset(); 
$("<p id=\"anchortitlecontainer\"></p>").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() + 10, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () { 
var pop = $(this); 
setTimeout(function () { pop.remove(); }, pop.text().length*80); 
}); 
}, 
function() { $("#anchortitlecontainer").remove(); } 
); 
}); 
});

Don't JQuery를 인용하는 것을 잊지 마세요.

코드의 setTimeout(function () { pop.remove(); }, pop.text().length*80); 제목 프롬프트가 너무 짧지 않도록 제목 길이를 기준으로 프롬프트 시간을 계산합니다. . 길거나 너무 긴 제목 프롬프트는 너무 짧습니다.

CSS 코드

코드는 다음과 같습니다.

#anchortitlecontainer { 
position: absolute; 
z-index: 5999; 
border: solid 1px #315B6C; 
padding: 5px; 
color: #315B6C; 
background: none repeat scroll 0 0 #FFFFFF; 
border-radius: 5px; 
display: none; 
} 
#anchortitlecontainer:before { 
position: absolute; 
bottom: auto; 
left: -1px; 
top: -15px; 
border-color: transparent transparent transparent #315B6C; 
border-style: solid; 
border-width: 15px; 
content: ""; 
display: block; 
width: 0; 
} 
#anchortitlecontainer:after { 
position: absolute; 
bottom: auto; 
left: 0px; 
top: -13px; 
border-color: transparent transparent transparent #FFFFFF; 
border-style: solid; 
border-width: 15px; 
content: ""; 
display: block; 
width: 0; 
}

CSS3 기능 중 일부를 사용하고 이미지 사용은 피하세요.

저는 CSS 전문가가 아니기 때문에 이 스타일을 조정하는 데 시간이 좀 걸렸습니다. 누군가가 사용할 수 있다면 영광입니다. :)

맞춤형 태그 제목 프롬프트 툴팁 예제와 관련 기사를 위한 jquery+CSS 생성에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!