title: Background Opacity for Table row <tr>
body: <p>I want to apply background color with opacity to the table row ,and not applying the opacity to the table data <code>&lt;td&gt;</code>, I am using the below style</p>
  
  <pre><code> tr
      {
      background-color: #4682B4;
      filter:alpha(opacity=60); 
      -moz-opacity:0.6;/* Mozilla */
      opacity: 0.6;
      filter:alpha(opacity=60);
      }
  </code></pre>
  
  <p>It works fine with Internet explorer ,the opacity applies only to the table row not to the <code>&lt;td&gt;</code>, but with other browser the opacity also applies the <code>&lt;td&gt;</code> since it is attached to the <code>&lt;tr&gt;</code>.</p>
  
  <p>Actually my mouseover event is</p>
  
  <pre><code>_cellMouseHover: function (e) {
              var $target = $(e.target);
              var row = $target.closest('tr');
              row.css({"background-color": "#4682B4",
                       "filter":"alpha(opacity=60)", /* IE */
                       "-moz-opacity":"0.6", /* Mozilla */
                       "opacity": "0.6","filter":"alpha(opacity=60)",
                       "filter": "progid:DXImageTransform.Microsoft.Alpha(opacity=0.6)", 
                      });
      },
  </code></pre>