js控制DIV显示

Question

var oId1 = document.getElementById('d1');
var oId2 = document.getElementById('d2');
oId1.onmouseover = function(){
this.style.display = 'none';
oId2.style.display = 'block';
}
oId2.onmouseout = function(){
this.style.display = 'none';
oId1.style.display = 'block';
}

JS代码我是这样写的，可以实现，但是所包含的DIV,d1和d2，鼠标移动上去切换的时候会来回在d1和d2跳动，请问如何解决！~

Answer 1

你需要再写下 d1的 onmouseout 和d2的onmouseover

追问

我不怎么会，具体得怎么写呢？麻烦您回答我一下，谢谢哈！～

追答

oId1.onmouseout = function(){ this.style.display = 'block'; oId2.style.display = 'none'; } oId2.onmouseover = function(){ this.style.display = 'block'; oId1.style.display = 'none'; }

我是这样想的 ，不知道你要实现的功能是什么。

Answer 2

控制隐藏别用display:none;使用display控制隐藏的话，元素本身不占位，会导致后边的元素移动到前边，就触发了另外元素对应的事件。所以导致了来回的跳动。你这里控制隐藏使用
style.visibility = 'hidden';和style.visibility = 'visible';这样就算元素隐藏一样会占位，就不会来回跳动了。
另外你的mouseover和mouseout事件也都需要完善。

Answer 3

你这样肯定会来回跳因为他们两个在不停的执行！

Answer 4

把 block 换成inline试试