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

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. 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?

The second Question: Actually I want to create a tagging effect so when I mouse over the div it will appear. So I change my javascript code to this:

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; inline inside the innerDiv and set the javascript as following:

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/

Why not just use `#tag { visibility: hidden }` and `#tag:hover { visibility: visible }` ? — stuajc, Sep 06 '13 at 04:51
yea, i know this method, but some time i want to create more complicated application using javascript, why my code dont work? — dramasea, Sep 06 '13 at 04:59
You are going to need to use 'opacity' and not 'visibility'. — Centijo, Sep 06 '13 at 05:02
When the div is hidden, onmouseover ends and onmouseout begins, in an endless cycle that looks like blinking. http://stackoverflow.com/questions/7407767/onmouseover-causing-blinking — L_Holcombe, Sep 06 '13 at 05:03

score 5 · Answer 1 · edited May 23 '17 at 12:14

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

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.

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

Use opacity: 0 instead.

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; by wrapping the tag div in a div with its background set to transparent.

Attach the mouseover/mouseout handlers to the wrapping div and change the visibility of the child. This avoids the repeated mouseover/mouseout events as the wrapper will always receive mouse events.

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>

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. I haven't tried that approach myself with older browsers, but it may work for you.

can you provide reference or documentation so I can know more about it :)?? — dramasea, Sep 06 '13 at 05:00
@dramasea I can't seem to dig it out of the spec but did find several references on stack overflow. Added a link to one in the answer. — dc5, Sep 06 '13 at 05:35
@dramasea - added an approach that will work for `visibility: hidden` and a link to a CSSTricks article about backwards compatible transparency. — dc5, Sep 06 '13 at 17:33

score 2 · Answer 2 · answered Sep 06 '13 at 04:55

2

What you are trying to accomplish can be done in CSS:

#tag:hover { opacity: 0; }

http://jsfiddle.net/Rh5wb/

answered Sep 06 '13 at 04:55

Centijo

584
6
15

is it posible that i use js?? – dramasea Sep 06 '13 at 04:57
If this is the extent of your issue, js may be unnecessary. Keep it simple. – Phix Sep 06 '13 at 05:53

score 1 · Answer 3 · answered Sep 06 '13 at 05:11

1

Using opacity and js

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

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

http://jsfiddle.net/uFLPg/1/1

answered Sep 06 '13 at 05:11

Diego

366
1
7

Why it will produce blinking effect when css turn from visibility visible to hidden

3 Answers3