Tabuľka - hover

Programovacie jazyky, rady, poradňa...
rebuss
Star
Star
Používateľov profilový obrázok
Príspevky: 611
Registrovaný: 18 sep 2011, 12:20

Tabuľka - hover

Príspevok od používateľa rebuss »

Zdravím. Spravil tabuľku 12x tr a do každého td (je to tak pod sebou a jeden riadok ma širku niečo cez 270px) .. no a problém je v tom že keď chcem nadísť na ten riadok ma sa zmeniť pozadie a rozsvietiť text. Lenže ako som skúšal td:hover tak sa zmenilo iba to pozadie. Potom som skúsil tr, a taktiež nefunguje. Ten text sa mi menil iba pri a:hover a ja chcem aby keď nadídem na celý riadok, mimo textu tak sa zmení aj text..
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3206
Registrovaný: 14 feb 2009, 22:34
Bydlisko: Bratislava
Kontaktovať používateľa:

Re: Tabuľka - hover

Príspevok od používateľa weroro »

Kód: Vybrať všetko

tr:hover {background: #f00;}
tr:hover a {color:#ff0;}
rebuss
Star
Star
Používateľov profilový obrázok
Príspevky: 611
Registrovaný: 18 sep 2011, 12:20

Re: Tabuľka - hover

Príspevok od používateľa rebuss »

Tak taktó.. :) skúsil som všeličo ale toto nie, ďakujem.
A ešte mám dotaz ..

1) K tej veľkej tabuľke ktorú som spomínal vyššie. Mám tam popri texte po pravej strane pridané obrázky-ikonky, a chcem aby sa pri hoveri, keď nadídem s myšou na celý riadok, či už na text alebo čisto na riadok, zmenili. Rozmýšľal som nad mouseover ale to je len keď nadídem presne na daný obrázok nie?
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Re: Tabuľka - hover

Príspevok od používateľa awtt »

Tu ikonky mas ako css background alebo ako img ?
Kazdopadne je to uplne jednoduche a nemusis vobec pouzit js ak nechces, staci ak vies ako funguju css selectory.

Ak to mas ako css background tak sprav nieco v zmysle: tr:hover selector{zmenit pozadie}.
Ak to mas ako img tak napriklad si ten img tag hod tam dvakrat a schovavaj/zobrazuj ich napriklad takto tr:hover img.nohover{display: none} tr:hover img.hover{display: block}.
Napísať odpoveď