아래와 같이:
다음과 같이 코드 코드를 복사합니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<제목></제목>
<스타일 유형="텍스트/css">
.toopTip
{
배경색:노란색;
테두리 스타일:단색;
테두리 너비:1px;
테두리 색상:빨간색;
}
</style>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
/*
표시된 div와 왼쪽 및 위쪽 테두리가 표시된 div와 겹치도록 하려면 문서 헤더 W3C 표준을 삭제해야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
함수 initEvent() {
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
세부 div의 너비와 길이가 원본 div보다 크기 때문에 원본 div를 사용하여 마우스 이동 이벤트를 바인딩할 수 없습니다.
이런 방식으로 원본 div가 가려지고 onmouseout 이벤트가 자동으로 트리거됩니다.
*/
//divArray[i].onmouseout = 제거DivDetail;
}
}
함수 createDivDetailOne() {
//divDetail div의 고유성을 확인합니다.
var divDetail = document.getElementById("divDetail");
if(divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "절대";
divObj.style.width = "200px";
divObj.style.height = "100px";
var TriggerObj = window.event.srcElement;
divObj.style.top = TriggerObj.offsetTop;
divObj.style.left = TriggerObj.offsetLeft;
divObj.innerHTML = TriggerObj.innerText;
document.body.appendChild(divObj);
//이때, 세부정보에 사용된 div가 원래 div를 덮고 있으므로 가려진 div를 이벤트 처리해야 합니다.
document.getElementById("divDetail").onmouseout = function() {
divObj = 이;
if (!divObj) {
반품;
}
document.body.removeChild(divObj);
};
}
함수 제거DivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
반품;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<본문>
<div id="divOne" style="배경색: 자홍색; 너비: 100px; 높이: 100px;"
안녕하세요 마이제이월드입니다!
</div>
<div id="divTwo" style="배경색: 아쿠아; 너비: 100px; 높이: 100px">
My Js World에 오신 것을 환영합니다!
</div>
<div id="divThree" style="배경색: 회색; 너비: 100px; 높이: 100px">
이것은 나의 Js 세계입니다!
</div>
</body>
</html>