Как показано ниже:
Скопируйте код кода следующим образом:
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title></title>
<style type="text/css">
.toopTip
{
цвет фона:Желтый;
стиль границы: сплошной;
ширина границы: 1 пиксель;
цвет границы: красный;
}
</стиль>
<script Language="javascript" type="text/javascript">
/*
Если вы хотите, чтобы левая и верхняя границы предложенного 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 = RemoveDivDetail;
}
}
функция createDivDetailOne() {
//обеспечиваем уникальность divDetail div
var divDetail = document.getElementById("divDetail");
если (divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "абсолютный";
divObj.style.width = "200 пикселей";
divObj.style.height = "100 пикселей";
вар триггерObj = window.event.srcElement;
divObj.style.top = триггерObj.offsetTop;
divObj.style.left = триггерObj.offsetLeft;
divObj.innerHTML = триггерObj.innerText;
document.body.appendChild(divObj);
//На данный момент элемент div, используемый для получения подробной информации, покрывает исходный элемент div, поэтому покрытый элемент div необходимо обработать по событию.
document.getElementById("divDetail").onmouseout = function() {
divObj = это;
если (!divObj) {
возвращаться;
}
document.body.removeChild(divObj);
};
}
функция RemoveDivDetail() {
var divObj = document.getElementById("divDetail");
если (!divObj) {
возвращаться;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</скрипт>
</голова>
<тело>
<div id="divOne" style="цвет фона: фуксия; ширина: 100 пикселей; высота: 100 пикселей;" >
Привет, мой мир JS!
</div>
<div id="divTwo" style="background-color: Aqua; ширина: 100 пикселей; высота: 100 пикселей">
Добро пожаловать в Мой мир JS!
</div>
<div id="divThree" style="background-color: Grey; ширина: 100 пикселей; высота: 100 пикселей">
ЭТО МОЙ мир Js!
</div>
</тело>
</html>