Question

鼠标经过li时显示一个div如何做到？Javascript

就像这样

而且百度好智能，有时候显示在li的上面，有时候在下面





Answer 1

<ul>
<li>把鼠标放到这里1111222333</li>
<li>把鼠标放到这里aaadddffgfg</li>
<li>把鼠标放到这里vcvvbvb</li>
<li>把鼠标放到这里765787687</li>
<li>把鼠标放到这里hgfhgfjhj</li>
<li>把鼠标放到这里iyuiyui</li>
</ul>
<div id=tips style="display:none;POSITION:absolute;border:1px solid #ddd;background-color:#eee;padding:8px"></div>
<script>
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
tips.innerHTML="你的鼠标指针所在的文字是：<br>"+this.innerText;
tips.style.display="block";
tips.style.left=this.offsetLeft+"px";
tips.style.top=this.offsetTop+this.offsetHeight+"px";
}
lis[i].onmouseout=function(){
tips.style.display="none";
}
}
}
</script>

至于智能判断显示位置，可以在显示之前先计算<li>的底端再加上<div>的高度是否会超出浏览器的显示范围，如果超出，就把<div>的top设为<li>的顶端再减去<div>的高度，这样的话<div>就会显示在<li>的上面而不至于跑到屏幕下面去了。