javascript - 为什么css从visibility visible转为hidden会产生闪烁效果

Question

<div style='position:relative'>
<div id ='tag' style=' border: 1px solid red; position : absolute; top: 20px; left: 20px; width: 50px; height: 50px;'></div>
<img src='http://localhost/jlin.jpg' id='wow'>
</div>

这是我的html代码

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.onmouseover = function(){
      tag.style.visibility = "hidden";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "visible";
    }
}

这是我的 javsacript 代码。我希望当我将鼠标放在它上面时隐藏内部 div，当我将鼠标光标移出它时再次出现。为什么当我将鼠标放在内部 div 上时内部 div 一直闪烁？

第二个问题:实际上我想创建一个标记效果，所以当我将鼠标悬停在 div 上时它会出现。所以我将我的 javascript 代码更改为:

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.style.visibility = "hidden";
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "hidden";
    }
}

这是行不通的。我尝试了另一种方法，我在 innerDiv 内添加 visibility: hidden; 内联并将 javascript 设置如下:

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
}

好像也行不通，为什么？这是第一个问题的 fiddle :http://jsfiddle.net/uFLPg/

Answer 1

设置visibility: hidden 时，不会向该元素发送鼠标事件。

您看到的是 mouseout 事件在元素隐藏时触发，然后导致代码再次将其设置为可见，然后立即触发 mouseover 事件鼠标移动 - 等等。

这里有一些附加信息:Does opacity:0 have exactly the same effect as visibility:hidden

改用opacity: 0。

Fiddle

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.style.opacity = 0;
    tag.onmouseover = function () {
        tag.style.opacity = 1;
    }
    tag.onmouseout = function () {
        tag.style.opacity = 0;
    }
}

---

如果您担心旧版浏览器对不透明度的支持，您仍然可以使用 visibility: hidden; 通过将 tag div 包装在 div 其背景设置为 transparent。

将 mouseover/mouseout 处理程序附加到包装 div 并更改子项的可见性。这避免了重复的 mouseover/mouseout 事件，因为包装器将始终接收鼠标事件。

Demo 2:

HTML:

<div style='position:relative'>
    <div id='tag' style='position : absolute; top: 20px; left: 20px; width: 50px; height: 50px; z-index: 10; background: transparent;'>
        <div id='tagInner' style=' border: 1px solid red; position : absolute; top: 0; left: 0; right: 0; bottom: 0;'>     
    </div>
    </div>
    <img src='http://www.hihowareyou.com/store/images/products/tn_HiVinylFrontmed.jpg' id='wow'>
</div>

代码:

var tag      = document.getElementById('tag');
var tagInner = document.getElementById('tagInner');

tagInner.style.visibility = 'hidden';
tag.onmouseover = function () {
    tagInner.style.visibility = 'visible';
}
tag.onmouseout = function () {
    tagInner.style.visibility = 'hidden';
}

---

CSSTricks 上还有一篇关于 CSS Transparency Settings for All Browsers 的有趣文章.我自己还没有在旧版浏览器上尝试过这种方法，但它可能适合你。