title: How to add a box shadow to a table tr element upon hover?
body: <p>So I am attempting to add a box shadow to my table <code>tr</code> element upon hover.</p>
  
  <p>Currently, it is working perfectly in Firefox, but no other browser.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>table tbody tr:hover {
      background-color:#13326b;
      color:#ffffff;
      text-shadow: 1px 2px #000000;
      box-shadow: 0px 0px 10px #ff0000;
      -webkit-box-shadow: 0px 0px 10px #ff0000;
      -moz-box-shadow: 0px 0px 10px #ff0000;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table class="table table-list-search"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Logo&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Symbol&lt;/th&gt;
                  &lt;th&gt;Sector&lt;/th&gt;
                  &lt;th&gt;Sub-Sector&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sample&lt;/td&gt;
                  &lt;td&gt;Filter&lt;/td&gt;
                  &lt;td&gt;12-11-2011 11:11&lt;/td&gt;
                  &lt;td&gt;OK&lt;/td&gt;
                  &lt;td&gt;123&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Try&lt;/td&gt;
                  &lt;td&gt;It&lt;/td&gt;
                  &lt;td&gt;11-20-2013 08:56&lt;/td&gt;
                  &lt;td&gt;It&lt;/td&gt;
                  &lt;td&gt;Works&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;§&lt;/td&gt;
                  &lt;td&gt;$&lt;/td&gt;
                  &lt;td&gt;%&lt;/td&gt;
                  &lt;td&gt;&amp;&lt;/td&gt;
                  &lt;td&gt;/&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>Here is an image of how it displays in Firefox:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/F7YvU.jpg" alt="enter image description here"></p>
  
  <p><strong>Here is an image of how it displays in Chrome:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tZqDg.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/Gx7Uy/" rel="nofollow noreferrer"><strong>DEMO HERE</strong></a></p>
  
  <p>How could I edit my CSS to apply this box shadow hover for all browsers?</p>