JavaScript滑鼠移過提示操作資訊

有時候為了簡潔設計，當使用者滑鼠未經過時，我們不用向使用者顯示操作提示。直到使用者滑鼠經過了，就顯示相應的操作提示。這種設計在很多地方都用得上。先看看下面的示範。

效果示範

• 這個是第1行的文字，大家看清楚了
• 這個是第2行的文字，大家看清楚了
• 這個是第3行的文字，大家看清楚了
• 這個是第4行的文字，大家看清楚了
• 這個是第5行的文字，大家看清楚了
• 這個是第6行的文字，大家看清楚了
• 這個是第7行的文字，大家看清楚了
• 這個是第8行的文字，大家看清楚了
• 這個是第9行的文字，大家看清楚了

javascript code 如下：

<script type="text/javascript"><!--var Ptr = document.getElementById("tab").getElementsByTagName("li");function $() {for (i=1;i<Ptr.length+1;i++) {       Ptr[i-1].className = (i%2>0)?"t1":"t2";  }}//window.onload=$;for(var i=0;i<Ptr.length;i++){var msg = document.createElement("span");Ptr[i].onmouseover = function(){this.tmpClass=this.className;      this.className = "t3";    //var msg = document.createElement("span");this.appendChild(msg);msg.innerHTML = "添加資訊";msg.style.cssFloat = "right";};//Ptr[i].children.html = '<span>hello</span>';    Ptr[i].onmouseout=function(){      this.className=this.tmpClass;//var msg = document.createElement("span");this.removeChild(msg);};}//--></script>

不知道你有沒有發現，當滑鼠移動到“添加資訊”的時候，li處於未選中了狀態，並且在IE上有些問題。下面的處理方式可能會更好，先看示範：

• 添加資訊這個是第1行的文字，大家看清楚了
• 添加資訊這個是第2行的文字，大家看清楚了
• 添加資訊這個是第3行的文字，大家看清楚了
• 添加資訊這個是第4行的文字，大家看清楚了
• 添加資訊這個是第5行的文字，大家看清楚了
• 添加資訊這個是第6行的文字，大家看清楚了
• 添加資訊這個是第7行的文字，大家看清楚了
• 添加資訊這個是第8行的文字，大家看清楚了
• 添加資訊這個是第9行的文字，大家看清楚了

嗯，這樣子就好多了。