Background color changes row rollovers

[Cineno]

I have an ASP.net grid view that I've styled with CSS. The style works fine, but now I'm trying to get a row's background color to change when the user rolls over it.

I've tried little things here and there, but I'm still learning CSS so it's taking a while. I've gotten a cell's background to change but not a row.

Here's the code:

.GridViewStyle
{
font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border:#444 1px solid;
}
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
background-image: url(Images/HeaderSoftGrey.jpg);
background-position:center;
background-repeat:repeat-x;
background-color:#1d1d1d;
}

.HeaderStyle th
{
padding: 5px;
color: #ffffff;
}

.HeaderStyle a
{
text-decoration:none;
color:#ffffff;
display:block;
text-align:left;
font-weight:normal;
}
.PagerStyle table
{
text-align:center;
margin:auto;
}
.PagerStyle table td
{
border:0px;
padding:5px;
}
.PagerStyle td
{
border-top: #1d1d1d 1px solid;
}
.PagerStyle a
{
color:#ffffff;
text-decoration:none;
padding:2px 10px 2px 10px;
border-top:solid 1px #777777;
border-right:solid 1px #333333;
border-bottom:solid 1px #333333;
border-left:solid 1px #777777;
}
.PagerStyle span
{
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
padding:2px 10px 2px 10px;
}
/*RowStyles*/

.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
}
.RowStyle td
{
background-color: #c9c9c9;
}
.AltRowStyle td
{
background-color: #f0f0f0;
}
.SelectedRowStyle td
{
background-color: #ffff66;
}

.RowStyle a, .AltRowStyle a
{
text-decoration:none;
}
.RowStyle a img, .AltRowStyle a img
{
border-style:none;
}

.RowStyle tr:hover td, .AltRowStyle tr:hover td
{
background: #d0dafd;
}

My GridView has .GridViewStyle set as it's class. It's RowStyle is set to .RowStyle, and AlternatingRowStyle is set to .AltRowStyle

Any ideas of what I need to change in my CSS to get a row's background color to change when I mouse over it? Thanks for any help!

 

[vacunita]

I assume this is your attempt:

.RowStyle tr:hover td, .AltRowStyle tr:hover td
{
    background: #d0dafd;
}

This targets a td inside a tr being hovered which is inside an element with the class RowStyle. does that match up with what you have?

As a first step try a general

tr:hover td{
background-color:#xxxxxx;
}

Possibly if the RowStyle class is being applied to the tr elements (the HTML rows), then perhaps what you want is:

.RowStyle:hover td{
background-color:#xxxxxx;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Cineno]

Thank you! Your last idea about .RowStyle being applied to the tr elements was correct. I put what you advised into my CSS and it works perfectly now.

Thanks a lot!

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech