在onMouseover和onMouseout上顯示/隱藏div。

Question

嘿，我有一個非常基本的HTML代碼。 HTML事件屬性存在一些問題。 檢查此代碼：

<td ><div id="id" onMouseover="show()" onMouseout="hide()">
       <table width=100%>
        <tr><td>hiiii</td></tr>
                     </table>
                     </div></td>

這是腳本：

<script>
         function show() {  document.getElementById('id').style.visibility="visible";  }
         function hide() {    document.getElementById('id').style.visibility="hidden";  }
</script>

無論如何，輸出都會顯示hiiii 。

Answer 1

html事件處理程序屬性的范圍存在問題。 有兩個簡單的解決方案：

使show和hide功能在全局范圍內可用 ：

window.show = function () { document.getElementById('id').style.visibility="visible"; }
window.hide = function () { document.getElementById('id').style.visibility="hidden"; }

或將事件處理程序放在您的JavaScript代碼中 ，而不是HTML屬性中：

var div = document.getElementById('id');
div.onmouseover = show;
div.onmouseout = hide;
function show() { document.getElementById('id').style.visibility="visible"; }
function hide() { document.getElementById('id').style.visibility="hidden"; }

Answer 2

onmouseover和onmouseout屬性應為小寫。

所以：

<div id="id" onmouseover="show()" onmouseout="hide()">

DEMO

Answer 3

  <td>
     <div id="id" onmouseover="show()" onmouseout="hide()">
       <table width="100%">
          <tr><td id="test">
                            hiiii
               </td>
           </tr>
        </table>
      </div>
   </td>

 function show() {
     document.getElementById('test').style.visibility = "visible";
    }
 function hide() {
        document.getElementById('test').style.visibility = "hidden";
    }

看到這個小提琴： http : //jsfiddle.net/obnzbpmd/8/

當Div隱藏時，它不會調用JS hide（）函數。 您需要在要根據條件顯示/隱藏的控件ifself上設置ID，並在Main Div元素上分配事件處理程序。

希望這會有所幫助，並希望這就是您要尋找的！