| Autor | Zpráva | ||
|---|---|---|---|
| martin b. Profil * |
#1 · Zasláno: 27. 3. 2010, 15:27:55
Ahoj,
neřešil jste někdo tento problém? Mám tabulku a chci, aby když najedu myší na nějaký řádek, tak se obarvil barvou, ale také se mu změnil border. Nějak nemůžu najít žádné funkční řešení. table tr:hover td { background: light-grey; border: 1px solid green; }Funguje to normálně, pokud tabulka samotná nemá border-collapse: collapse;... jak ale udělat jinak, aby buňky byly u sebe a pokud najedu na řádek, tak se změnila i barva ohraničení? Je mi jedno jestli ohraničení celého řádku nebo jednotlivé buňky.. Poradíte mi někdo proím? děkuju |
||
| panther Profil |
#2 · Zasláno: 29. 3. 2010, 10:20:11 · Upravil/a: panther
martin b.:
Barva „light-grey“ neexistuje, píše se bez pomlčky. Více barev zde, ale lépe naučit se používat hedadecimální zápisy barev, tedy „#d3d3d3“. Jinak v uvedeném zápisu není nic, co by mělo nefungovat. Vytvoři jsem funkční ukázku problému, funguje všude kromě IE6, která neumí :hover jinde než u odkazů. Tam si snadno doděláš tuto funkčnost přilinkováním hover.htc. |
||
|
Časová prodleva: 5 dní
|
|||
| martin b. Profil * |
#3 · Zasláno: 3. 4. 2010, 02:33:07
panther:
Aha, moje chyba. V barvě pomlčka není, psal jsem to z hlavy sem na fórum, ale v tom problém nemám. A nemám ani problém s uváděným příkladem, problém nastane, pokud tabulce nastavíte border-collapse: collapse; to vlastně dá ty řádky na sebe tak, že horní řádek překrývá ten spodní, takže pokud se najede myší na nějaký spodnější řádek (kromě posledního) nebude u buněk obarven horní border, protože je schovaný. Zkoušel jsem jestli by nezabral z-index, ale pokud nastavím něčemu position: relative, tak se border nevykreslí vůbec... (zkoušeno přes fierebug ve FF) |
||
| joe Profil |
#4 · Zasláno: 3. 4. 2010, 04:34:49
Vymyslel jsem takové řešení, ale neohraničuje řádek zleva a zprava... Taky jsem jednou už hledal řešení, ale to co jsem napsal, tak to myslím, že je celkem dobré, ne? :-)
<style>
table {
border-spacing: 0;
border: 1px solid #d5d5d5;
width: 150px;
}
/* prvni radek */
tr td {
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
/* dalsi radky */
tr+tr td {
border-bottom: 1px solid #fff;
border-top: 1px solid #d5d5d5;
}
tr:hover td {
border-top: 1px solid;
border-bottom: 1px solid;
border-color: blue;
}
/* pro IE */
table {
_border-collapse: collapse;
}
table td {
_border-top: 1px solid #d5d5d5;
_border-bottom: 1px solid #d5d5d5;
}
</style>
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
</tr>
</table>
|
||
|
Časová prodleva: 14 let
|
|||
0