javascript - 当CSS从可见性变为隐藏时，为什么会产生闪烁效果(Why it will produce blinking effect when css turn from visibility visible to 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>

This is my html code

(这是我的html代码)

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

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

This is my javsacript code.

(这是我的javsacript代码。)

I want the inner div to hide when I mouse ober it and appear again when I put my mouse cursor out of it.Why the div inside keep on blinking when I put my mouse on the inner div?

(我希望内部div在鼠标移开时隐藏起来，而当我将鼠标指针移出时再次出现。为什么当我将鼠标放在内部div上时，内部div仍然闪烁？)

The second Question: Actually I want to create a tagging effect so when I mouse over the div it will appear.

(第二个问题：实际上，我想创建一个标记效果，因此当我将鼠标悬停在div上时，它将出现。)

So I change my javascript code to this:

(所以我将我的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";
    }
}

It doesn't work.

(没用)

I tried another way which I add the visibility: hidden;

(我尝试了另外一种添加visibility: hidden;)

inline inside the innerDiv and set the javascript as following:

(内联在innerDiv内部并按如下所示设置javascript：)

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

It seems like it does not work too, why?

(看来它也不起作用，为什么？)

This is the fiddle for 1st question: http://jsfiddle.net/uFLPg/

(这是第一个问题的小提琴： http : //jsfiddle.net/uFLPg/)

  ask by dramasea translate from so

Answer 1

When visibility: hidden is set, no mouse events are sent to the element.

(设置“ visibility: hidden ，没有鼠标事件发送到元素。)

What you were seeing is the mouseout event firing as the element went hidden which then caused the code to set it visible again which then triggered the mouseover event as soon as the mouse moved - and so on.

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

Some additional information here: Does opacity:0 have exactly the same effect as visibility:hidden

(此处提供一些其他信息： 不透明度：0与可见性具有完全相同的效果：隐藏)

Use opacity: 0 instead.

(使用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;
    }
}

---

If you are concerned about older browser support for opacity, you can still use visibility: hidden;

(如果您担心较旧的浏览器对不透明度的支持，则仍可以使用visibility: hidden;不visibility: hidden;不visibility: hidden;)

by wrapping the tag div in a div with its background set to transparent .

(通过包装tag在一个div div与背景设定为transparent 。)

Attach the mouseover/mouseout handlers to the wrapping div and change the visibility of the child.

(将mouseover / mouseout处理程序附加到包装div并更改子级的可见性。)

This avoids the repeated mouseover/mouseout events as the wrapper will always receive mouse events.

(这样可以避免重复的mouseover / mouseout事件，因为包装程序将始终接收鼠标事件。)

Demo 2:

(演示2：)

HTML:

(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>

Code:

(码：)

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';
}

---

There is also an interesting writeup on CSSTricks about CSS Transparency Settings for All Browsers .

(关于所有浏览器的CSS透明度设置，关于CSSTricks的文章也很有趣。)

I haven't tried that approach myself with older browsers, but it may work for you.

(我没有在较旧的浏览器中尝试过这种方法，但是它可能对您有用。)