I want to apply background color with opacity to the table row ,and not applying the opacity to the table data <td>, I am using the below style

 tr
    {
    background-color: #4682B4;
    filter:alpha(opacity=60); 
    -moz-opacity:0.6;/* Mozilla */
    opacity: 0.6;
    filter:alpha(opacity=60);
    }

It works fine with Internet explorer ,the opacity applies only to the table row not to the <td>, but with other browser the opacity also applies the <td> since it is attached to the <tr>.

Actually my mouseover event is

_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)", 
                    });
    },

I want to apply background color with opacity to the table row ,and not applying the opacity to the table data <td>, I am using the below style

 tr
    {
    background-color: #4682B4;
    filter:alpha(opacity=60); 
    -moz-opacity:0.6;/* Mozilla */
    opacity: 0.6;
    filter:alpha(opacity=60);
    }

It works fine with Internet explorer ,the opacity applies only to the table row not to the <td>, but with other browser the opacity also applies the <td> since it is attached to the <tr>.

Actually my mouseover event is

_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)", 
                    });
    },

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 19, 2013 at 5:15 Bharath asked Nov 19, 2013 at 5:03 BharathBharath 10111 gold badge44 silver badges1111 bronze badges 4

• 1 can you make a fiddle for your code so that we can check the issue? – NewUser Commented Nov 19, 2013 at 5:05
• Table rows cannot have backgrounds; only cells do, and they inherit from the row. – Phrogz Commented Nov 19, 2013 at 5:06
• Why did you tag your question with JavaScript and jQuery? – Blue Skies Commented Nov 19, 2013 at 5:11
• For my mouseover event I have applied css using jquery , so i have tagged with javascript and jquery , Blue Skies – Bharath Commented Nov 19, 2013 at 5:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Dont use " with styles, please write it in following way:

tr
{
  background-color: #4682B4;
  filter:alpha(opacity=60); /* IE */
  -moz-opacity:0.6; /* Mozilla */
  opacity: 0.6;
  filter:alpha(opacity=60);
}

Just use RGBA for the background-color instead of HEX.

In your case :

tr {
  background-color:rgba(70, 130, 180, 0.6)
}

RGBA works the following way : (red [0 - 255], green [0 - 255], blue [0 - 255], opacity [0 - 1]).