title: Onmouseout function for table gets called between rows/cells
body: <p>I have an image with a onmouseover function which brings up a table with some options over the image (image gets dimmed).  The table has a onmouseout function which should hide the table and show the image again.  Problem I'm having is whenever the mouse goes between rows or cells or even on the link inside a cell, the table flashes, as though the mouse went out of the table.  How can I fix this?</p>
  
  <p><a href="http://jsfiddle.net/9s89bL3u/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function dimImg(x) {
              x.style.opacity = "0.3";
              document.getElementById("happinessItems").style.visibility = 'visible';
          }
          function normalImg(x) {
              document.getElementById('firstImg').style.opacity = "1.0";
              x.style.visibility = 'hidden';
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          table{
              position: absolute;
              top: 0px;
              width: 495px;
              height: 330px;
              visibility: hidden;
              border-collapse: collapse;
              border-spacing: 0px;
          }
          table td {
              width: 247.5px;
              text-align: center;
          }
      &lt;/style&gt;
  
  &lt;a href="happiness.php"&gt;&lt;img id="firstImg" onmouseover="dimImg(this)" src="img/leftButton.jpg" style="display:inline-block; width:495px; margin-right:5px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222)" /&gt;&lt;/a&gt;
              &lt;table cellspacing="0" id="happinessItems" onmouseout="normalImg(this)"&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;a href="#"&gt;Coats/Jackets&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#"&gt;Sweaters/Hoodies&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;a href="#"&gt;Dresses/Suits&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#"&gt;Tshirts/Tops&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;a href="#"&gt;Shoes&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#"&gt;Bags&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td colspan="2"&gt;&lt;a href="#"&gt;Accessories&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>