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

嘿，我有一个非常基本的HTML代码。 HTML事件属性存在一些问题。检查验证码：显示/隐藏onMouseover和onMouseout上的div。

<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不管。

来源

2014-09-02 priyeshrulz

请[make] [小提琴]（http://jsfiddle.net/） – 2014-09-02 19:27:51

'onmouseover'和'onmouseout'应该全部小写。 – James 2014-09-02 19:30:44

这是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"; }

来源

2014-09-02 19:29:52

的onmouseover和onmouseout属性应该是小写案件。

所以：

DEMO

来源

2014-09-02 19:38:26 James

<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（）函数。您需要根据条件为要显示/隐藏的控件设置ID，并在Main Div元素上分配事件处理程序。

希望这会有所帮助，并希望这是你正在寻找的！

来源

2014-09-02 20:34:08 rach

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

回答

相关问题