明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

鼠標在文本上移動時層的顯示與消失

發(fā)表時間：2024-06-03 來源：明輝站整理相關軟件相關文章人氣：

[摘要]花了兩天的時間才把這個簡單的東西給做出來。本來早就想做這個東西的，但是由于......(跟老板后面做事，當然空閑的時間就少了，唉，實在不好意思，因為自己不才，所以找了個借口)。剛好現(xiàn)在公司又讓我做個房產管理系統(tǒng)，要用這樣的一個方法了，所以才狠下心來非把這個做出來不可。我認為這個例子非常實用(個人看...

花了兩天的時間才把這個簡單的東西給做出來。本來早就想做這個東西的，但是由于......(跟老板后面做事，當然空閑的時間就少了，唉，實在不好意思，因為自己不才，所以找了個借口)。剛好現(xiàn)在公司又讓我做個房產管理系統(tǒng)，要用這樣的一個方法了，所以才狠下心來非把這個做出來不可。我認為這個例子非常實用(個人看法)，而且好多大型網站上都有這種應用。今天寫下來和各位朋友一起分享。以下就是我的所有代碼，有不妥之處還請各位高人指教，在此先謝了。


把這里的所有代碼都放在<body>與</body>之間即可
<script language=javascript>
<!--
function hiddiv()
{
document.all.ab.style.display="none"
}
function showdiv()
{
document.all.ab.style.display=""
document.all.ab.style.left=window.event.clientX+15
document.all.ab.style.top=window.event.clientY
}
//-->

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區(qū)星海街東側<br>電話：0512-65103588-206</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(); onmousemove=showdiv();>發(fā)現(xiàn)之旅</a></td>
</tr>
</table>

當然了這里的功能比較簡單，沒有對瀏覽器類型進行判斷，本人不才，就把這個問題留給各位了，歡迎每一位朋友來修改這個問題。

在這里還有一個問題就是如果文本不止一個、定義的層也就不止一個。如果還用這樣的方法就會出錯，我對這個問題研究了一下，用下面的這個方法就可以解決了。

<script language=javascript>
<!--
function hiddiv(blah)
{
blah.style.display="none"
}
function showdiv(blah)
{
blah.style.display=""
blah.style.left=window.event.clientX+15
blah.style.top=window.event.clientY
}
//-->

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區(qū)星海街東側<br>電話：0512-65103588-20611</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新區(qū)明星街南側<br>電話：0512-65103588-20622</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>發(fā)現(xiàn)之旅</a></td>
</tr>
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和風景苑</a></td>
</tr>
</table>

如果有更多的文本和層的話以此類推即可。
在這里有幾點要說明的就是：
1、showdiv中帶參數(shù)時再用document.all.ab.style.display=""就不適用了，關于這點朋友們可以參考有關書籍
3、onmouseover與onmousemove的區(qū)別是：當鼠標移過當前對象時就產生了onmouseover事件,當鼠標在當前對象上移動時就產生了onmousemove事件，只要是在對象上移動而且沒有移出對象的，就是onmousemove事件。我當前就是因為這個onmouseover事件惹的禍要不早就搞定了。今天寫出來讓朋友們也能注意這一點。
4、如果朋友們有更好的方法或有不明白的地方我們可以一起探討。
5、有需要的朋友可以直接拿去用，本人保留版權