title: Javascript hover effect removes pre defined style
body: <p>I am using a <a href="http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=312" rel="nofollow noreferrer">tutorial from Imar Spaanjaars' web site</a> to make an entire table row clickable and have a hover effect on it also. Once the user hovers over the table row it removes the pre defined background color for that row. I want to make it so that way it does not overwrite this style. How might I do that? </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      function ChangeColor(tableRow, highLight)
      {
      if (highLight)
      {
        tableRow.style.backgroundColor = '#dcfac9';
      }
      else
      {
        tableRow.style.backgroundColor = 'white';
      }
    }
  
    function DoNav(theUrl)
    {
    document.location.href = theUrl;
    }
    &lt;/script&gt;
  </code></pre>
  
  <p>If you have any better suggestions to accomplish this task I would love to hear them! </p>
  
  <p>My tr tag has a bgcolor tag in it that is set by my php if that specific piece of mail has been read or not. </p>