Question

<style>
 .h,.e {list-style-type: none; float:left;}
 .h div,.e div{background-color:gray; padding:2px 20px;margin:1px;}
 #h1,#e1{background-color:yellow; padding:2px 20px;margin:5px; visibility:hidden;
 }

<ul>
  <li class="h">
    <div id="h">Home</div>
    <ul class="h1" id="h1"><li>H1</li><li>H2</li><li>H3</li><li>H4</li></ul>
  </li>
  <li  class="e">
    <div id="e">Exit</div>
    <ul class="e1" id="e1"><li>E1</li><li>E2</li><li>E3</li><li>E4</li></ul>
  </li>
<ul>

<script>
  var oh = document.getElementById("h");
  var oe = document.getElementById("e");
  var oh1 = document.getElementById("h1");
  var oe1 = document.getElementById("e1");

  oh.onmouseover=function(){oh1.style.visibility="";};
  oe.onmouseover=function(){oe1.style.visibility="";};
</script>

on mouseover我想显示id = h1，e1项但它不起作用....，代码出了什么问题？

Answer 1

试试visible。

oh1.style.visibility="visible";

Answer 2

使用jQuery：http://jsfiddle.net/JqvSL/8/

它让您的生活更轻松，代码看起来更干净。您可以使用opacity或display隐藏块，但visibility也适用于jQuery。

Answer 3

<script>
  var oh = document.getElementById("h");
  var oe = document.getElementById("e");
  var oh1 = document.getElementById("h1");
  var oe1 = document.getElementById("e1");

  oh.onmouseover=function(){oh1.style.display="block";};
  oe.onmouseover=function(){oe1.style.display="block";};
</script>

Answer 4

尝试：

oh1.style.visibility="visible";

应该是一个非常明显的修复，但至于解释 - 将可见性设置为“”没有价值 - 因此不会有任何变化，“可见”是一个可接受的值，并将显示oh1对象。

onmouseover不起作用

4 个答案: