Problem med "Hover" på hela raden

8 svar · 571 visningar · startad av Tmed 15 dec. 2006

TmedMedlem sedan juni 2000145 inlägg

15 dec. 2006 21:35#1

Jag har nu suttit ett antal timmar med att försöka få hela raden att ändra färg när man för musen över den utan att lyckas...

Problemet är att bara cellen "rubrik" blir markerad och inte hela <TR> raden.

Jag kan inte mycket om css och koden kan vara litet rörig ännu:

asp-fil:

<TABLE id="Grid">
 <THEAD>
  <TR>
   <TH width="30">Val</TH>
   <TH width="80">
    <A title="Sortera Stigande/Fallande" HREF="default.asp?page=news&sortby=date&AscDesc=<%=Session("AscDesc")%>">Datum</A>
   </TH>
   <TH>
    <A title="Sortera Stigande/Fallande" HREF="default.asp?page=news&sortby=header&AscDesc=<%=Session("AscDesc")%>">Rubrik</A>
   </TH>
  </TR>
 </THEAD>
 <TBODY>
  <TR>"
   <TD WIDTH="30"'><INPUT type=checkbox value=1></TD>
   <TD WIDTH="80">2006-01-01</TD>
   <TD><A HREF="test.asp?page=news&action=edit">Rubrik</A></TD>
  </TR>
 </TBODY>
</TABLE>

Och css-fil 1:

#Grid {
 WIDTH: 100%; BORDER-COLLAPSE: collapse; font-size: 1.1em; 
}
#Grid TH {
 PADDING-RIGHT: 5px! important; PADDING-LEFT: 5px! important; PADDING-BOTTOM: 1px! important; VERTICAL-ALIGN: middle; PADDING-TOP: 1px! important; TEXT-ALIGN: left
}
#Grid TD {
 PADDING-RIGHT: 5px! important; PADDING-LEFT: 5px! important; PADDING-BOTTOM: 1px! important; VERTICAL-ALIGN: middle; PADDING-TOP: 1px! important; TEXT-ALIGN: left
}
#Grid TR.Odd {
 BACKGROUND: gray
}
#Grid THEAD TH {
 VERTICAL-ALIGN: middle; WHITE-SPACE: nowrap; HEIGHT: 20px
}
#Grid TBODY TD {
 PADDING-TOP: 2px;
}
#Grid TBODY TD A {
 DISPLAY: block;
}
#Grid TBODY TH A{
 DISPLAY: block;
}
#Grid TBODY TR {
 DISPLAY: block;
}

css-fil 2:

#Grid {
 COLOR: #755721;
}
#Grid THEAD {
 BACKGROUND: #f3f1c6
}
#Grid THEAD TH {
 BORDER-RIGHT: #f6df93 1px solid; BORDER-BOTTOM: #f6df93 1px solid
}
#Grid THEAD TH A {
 COLOR: #755721;
}
#Grid TBODY {
 BACKGROUND: #ffffff
}
#Grid TBODY TR A{
 COLOR: #755721
}
#Grid TBODY TR A:hover {
 BACKGROUND: #e8e8e8;
}
#Grid TR.Odd {
 BACKGROUND: #edecd8
}

zcorpanMedlem sedan dec. 20042 245 inlägg

16 dec. 2006 01:18#2

tr:hover { background:lime; }

TmedMedlem sedan juni 2000145 inlägg

16 dec. 2006 09:24#3

Jag har redan testat detta och det funkar inte!
Enda gången jag kan få något markerat är när jag använder:

#Grid TBODY TR A:hover { BACKGROUND: #e8e8e8;}

Så koden under ger ingen effekt alls?!?!

#Grid TR:hover { BACKGROUND: #e8e8e8;}

Dessutom skiftar inte hela cellen färg vilket den borde då jag angivit display:block

zcorpanMedlem sedan dec. 20042 245 inlägg

16 dec. 2006 13:16#4

Jag tror problemet är att du testar i en dålig webbläsare (IE6?), inte att det är nåt fel på din kod.

TmedMedlem sedan juni 2000145 inlägg

17 dec. 2006 09:08#5

Jag har testat med IE7!

zcorpanMedlem sedan dec. 20042 245 inlägg

17 dec. 2006 13:18#6

Har du en doctype som triggar Standards mode?

TmedMedlem sedan juni 2000145 inlägg

17 dec. 2006 17:04#7

Jag kör med loose!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Bifogar en bild där man kan se hur det ser ut!

zcorpanMedlem sedan dec. 20042 245 inlägg

17 dec. 2006 17:41#8

Det funkar bra för mig, om du tar bort

#Grid TBODY TR {
 DISPLAY: block;
}

och ändrar

 <TBODY>
  <TR>[red]"[/red]
   <TD WIDTH="30"[red]'[/red]>

till

 <TBODY>
  <TR>
   <TD WIDTH="30">

Och sen lägger till

#Grid TBODY TR:hover { background:lime; }

Se till att det inte finns nåt före doctypen också...

TmedMedlem sedan juni 2000145 inlägg

17 dec. 2006 18:01#9

Många tack, dettta har tagit mig många timmar, skönt att detta forum finns......