js控制div隐藏显示。

Question

function shubiaoin(){
    document.getElementById("navbar1").style.visibility="visible";
}
function shubiaoout(){
    document.getElementById("navbar1").style.visibility="hidden";
}

<div id="navbar1" onmouseover="shubiaoin()" onmouseout="shubiaoout()"></div>

js控制div的隐显，但是该div最开始就是隐藏的，这js脚本就不能被触发。但是我查文档说“visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。”但是没有效果。然后我就换了透明度控制，但是这样可以吗？

Answer 1

你这个具体可以改一下触发的元素
可以外面再套一个div
然后用外面的div来控制里面#navbar1这个div的显示和隐藏

function shubiaoin(){
    document.getElementById("navbar1").style.visibility="visible";
}
function shubiaoout(){
    document.getElementById("navbar1").style.visibility="hidden";
}

<div onmouseover="shubiaoin()" onmouseout="shubiaoout()"><div id="navbar1" ></div></div>

Answer 2

使用javascript幫該元素添加css中display的樣式
例如：document.getElementById("navbar1").style.display="none";

Answer 3

如果题主不想改变页面布局的话，可以使用透明度opacity来控制显示。

function shubiaoin(){
    document.getElementById("navbar1").style.opacity = 1;
}
function shubiaoout(){
    document.getElementById("navbar1").style.opacity=0;
}

不过opacity的IE兼容不太好。

Answer 4

我的理解是visibility虽然是隐藏并还占用位置，但实事是隐藏了，你鼠标移上去时，找不到元素，所以没办法响应onmouseover的事件吧。

Answer 5

用透明度吧，既不影响布局又不影响mouseover事件，mouseover后opacity：1；filter：alpha(opacity=100);
mouseout后opacity：0；filter：alpha(opacity=0);这样就可以兼容性就很好了