Databases
StackOverflow2013
Postsdbo
POWhy it will produce blinking effect when css turn from visibility visble to hidden
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy it will produce blinking effect when css turn from visibility visble to hidden
    text
    copied!<pre><code>&lt;div style='position:relative'&gt; &lt;div id ='tag' style=' border: 1px solid red; position : absolute; top: 20px; left: 20px; width: 50px; height: 50px;'&gt;&lt;/div&gt; &lt;img src='http://localhost/jlin.jpg' id='wow'&gt; &lt;/div&gt; </code></pre> <p>This is my html code</p> <pre><code>window.onload = function(){ var tag = document.getElementById('tag'); tag.onmouseover = function(){ tag.style.visibility = "hidden"; } tag.onmouseout = function(){ tag.style.visibility = "visible"; } } </code></pre> <p>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?</p> <p>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:</p> <pre><code>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"; } } </code></pre> <p>It doesn't work. I tried another way which I add the <code>visibility: hidden;</code> inline inside the innerDiv and set the javascript as following:</p> <pre><code>window.onload = function(){ var tag = document.getElementById('tag'); tag.onmouseover = function(){ tag.style.visibility = "visible"; } } </code></pre> <p>It seems like it does not work too, why? This is the fiddle for 1st question :<a href="http://jsfiddle.net/uFLPg/" rel="nofollow">http://jsfiddle.net/uFLPg/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload