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个功能available in the global scope：

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

或者放置event handlers in your JavaScript code，而不是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（）函数。您需要根据条件在控件if if上设置ID，并在Main Div元素上指定事件处理程序。

希望这会有所帮助，希望这就是你要找的！

在onMouseover和onMouseout上显示/隐藏div。

3 个答案: