Inline zápis CSS pseudtřídy hover u odkazu

Dobrý den,

vím, že je to asi zvláštní otázka, ale pokusím se přiblížit problém. Potřebuji v inline zápisu CSS definovat chování odkazu při najetí myší (pseudotřída hover). Jde to? Pokud ano, jak? Pro použití inline stylu mám svůj důvod - každý odkaz v menu bude mít svůj vlastní měnící se obrázek hned vedle odkazu, php mi bude načítat vždy ty dvě adresy, tudíž to nemohu dát do hlavičky atd. Nebo existuje jiné elegantní řešení?

Ano, šlo by to jednoduše přes javascript, ale já se mu chci vyhnout. Bez JS by se pak design mohl rozpadnout.

Pokud to nejde, nějak to obejdu...

Odpovídám habendorfi:

Ano, našel jsem Tvé řešení, moc se mi líbí. Ovšem mám problém s tím, že není vidět text za IMG tagem. To je logické, protože přetékání je tam potlačeno. Zkusil jsem to obejít přes position: absolute, text je pak vidět, ale zatím jsem to zkoušel jen u jedné položky, navíc text poté poskakuje... Asi je to blbý a nepěkný pokus o to to nějak řešit, ale i přesto sem ten kód dám. ;)

Jinak koukám, že proti tomu doctype to není validní. Osobně to pak chci použít v jiném doctype (s HTML 4, ovšem který nutí IE6+ se správně chovat, alespoň někdy)

Tak si říkám, jestli nakonec nepoužít ten javascript (i když je mi to proti srsti). Ale to řešení má tu nevýhodu, že se oba obrázky nenačtou současně a problikává to... I když u malých by to nemělo vadit, že... No, ještě si vyhraju s tím text-indent.

Koukám, že tu mou úpravu nezkousne IE, no ostatně jako vždy.. :-( Takže se vrátím k tvému řešení zpět na začátek, to v IE6 funguje. Jak to myslíš, abych dal obrázek na background? Ještě mě napadlo to, že udělám daný obrázek delší, jako je šířka menu či textu (ale to netuším jak)...

Tak se mi podařilo udělat to, že jsem tam dal bílý obrázek a dosáhl jsem stejného efektu s tím, že mohu div roztáhnout. Ovšem text poskakuje zleva doprava podle toho, jestli na to najedu myší. Zkoušel jsem to dát do relativního spanu, ve kterém je vnořen absolutní span, ale text poskakuje i nadále. Nj, blbá myšlenka. Tohle obejít a jsem vysmátej. Netušíš?

Jde mi o to, aby se měnil současně obrázek i odkaz.

Najdeš to zde /původní verze v CSS/:

http://demo.webspen.cz/zmeny/zmena-obrazku.html

Začal jsem to nakonec dělat přes js. Je to věc, která když se nezobrazí, tak to nevadí. Navíc mnohem lépe se mi ten kód bude generovat, ještě bych rád vyřešil ten preload obrázků, ale to už je věc do jinýho fóra a jistě se to už řešilo. Problém s tím CSS byl ten, že IE to dost rozbil (zkoušeno na IE6, který stále akceptuju, ač nerad).

To je překlep.

Ano, to řešení bylo strašné, taky se mi hnusí. Také mám cit pro jednoduchý kód a toto byla opravdu pra...na. S tím backgroundem tě asi úplně nechápu, i když asi tuším. Každopádně jsem to udělal přes js, kód je čistý pěkný, kdo nemá js, tomu to prostě nebude problikávat, myslím, že taková tragédie to není. Kód je opravdu jednoduchý a validní, navíc obrázky přednačítám, takže se to zobrazuje rychle jako u tvého řešení. Tvoje řešení je pěkné, někdy se k němu vrátím a poperu se s tím backgroundem. To, co mi fungovalo ve FF, tak nešlo v IE, navíc ten kód (mnou upravený) byl hnusnej, tak jsem šáhl po js... Vím, je to výmluva. Jak říkám, časem se k tomu vrátím. Díky

Dost se mi líbí ta představa nemít tam js, ale co naplat, asi nejsem v css tak dobrej, musím se ještě hodně učit.

Odpovídám habendorfovi:

No, já to tak chtěl udělat, proto jsem se tak blbě ptal na ten inline zápis už v úvodu. Škoda, že ten návrh je jen v draftu na ten inline zápis. Tam je potíž s tím, že obrázky se načítají až dále za hlavičkou, musel bych ten systém překopat, což teď nestíhám, protože mám dvě větší zakázky plus dodělávku další pro slepého pána (úprava formulářů přidáním labelů pomohla evidentně :-) ). Takže tam zatím dám ten javascript a bude to fungovat. Jak se znám, k tomu CSS se dostrkám. ;) Spíš teď vylepšuju SEO modul (když to zákazník chce, proč mu to nedopřát) a poliďšťuju administraci.

Odpovídám Bubákovi:

Jojo, o tom vím, tohle udělám bez problémů, ale jak jsem psal výše, díky tomu, jak jsem to udělal, tak menu se načítá až za hlavičkou a zrovna nemám čas to překopávat. Javascript zatím bude stačit, je to relativně malý zásah. Preferuju stabilitu před narychlo látaným řešením. Nebýt tam problém s tím hoverem, tak je to v klidu. Hlavně u každé položky bude jiný obrázek, jak to zákazník chce. Jinak vím o tom, že style mohu použít i v body, ale mám dojem, že to není dle specifikace a není to čisté řešení. Chci mít validní kód, už kvůli kontrole syntaxe, kdyby nic jiného.