title: CSS element style set properly onMouseDown, why undesired reset onMouseUp?
body: <p>I have some head text/javascript:</p>
  
  <pre><code>function Show() {
      document.getElementById("Popup").style["display"] = "block";
  }
  function Hide() {
      document.getElementById("Popup").style["display"] = "none";
  }
  </code></pre>
  
  <p>In the body I do:</p>
  
  <pre><code>&lt;a href="" onMouseDown="Show()" onMouseUp=""&gt;&lt;img src="blah.jpg"/&gt;&lt;/a&gt;
  ...
  &lt;a href="" onClick="Hide()"&gt;X&lt;/a&gt; 
  </code></pre>
  
  <p>My CSS has:</p>
  
  <pre><code>#Popup {
      display:none;
      background-color:#EEEEEE;
      background: rgba(255, 255, 255, 1.0);   
      filter:alpha(opacity=80);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 160%;
      ...
  }
  </code></pre>
  
  <p>When I click on blah.jpg the Popup appears as expected .. but as soon as I mouseUp the popup disappears.  I want it to stay present until the "X" (in the second anchor tag) is clicked.  In the first anchor tag I tried onMouseUp="", but no happy.  Works same way in Chrome and Firefox.</p>
  
  <p>What to do?</p>
  
  <p>Thanks in advance</p>