| Autor | Zpráva | ||
|---|---|---|---|
| Musilda Profil |
Už jsem prošel snad tisíc stránek, ale nepovedl se mi rozchodit hover efekt ve firefoxu.
V kódu mám #buy-button{float:right;
width:150px;
height:24px;
background:url('images/buy-button.png') left bottom no-repeat;
transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
}
#buy-button:hover{
background:url('images/buy-button-hover.png') left bottom no-repeat;
}A html jednoduše <a id="buy-button" href="#">BUY ($0.99)</a> Z nějakého důvodu to funguje pouze ve chrome, nemáte někdo ponětí proč? Díky za rady. |
||
| Darker Profil |
#2 · Zasláno: 13. 7. 2012, 23:07:24
Mě to nefunguje akorát v opeře, kterou jsem už asi měsíc neupdatoval. Chyba bude ve špatné adrese obrázku -nezapomeň, že css bere adresy od vlastního CSS souboru, ne souboru, kam je linkované.
Ani jsem nevěděl, že CSS takovéhle pitominky umí. |
||
| Musilda Profil |
#3 · Zasláno: 13. 7. 2012, 23:12:03
Adresou obrázku to není, hover jako takový funguje, ale nefunguje transition, ta změna proběhne okamžitě. V to je zakopaný pes.
|
||
| margin Profil * |
#4 · Zasláno: 14. 7. 2012, 06:32:30
Některé prohlížeče asi mají problém s tím, že třeba backgdound-image a background-position dokáží změnit plynule, ale s background-image mají problém, protože ten se nedá vyjádřit číselně. Takže nezbývá, než to obejít.
Udělej HTML třebas takto: <a id="buy-button" href="#"><span></span>BUY ($0.99)</a> V CSS budeš napozicuješ SPAN dovnitř odkazu (vnořená pozice), dáš mu pozadí a budeš mu měnit (animovat) opacity. Pokud máš obrázky průsvitné, je možné, že jejich překrývání nebude vypadat tak, jak požaduješ a budeš muset použít mírně pozměněné řešení, do odkazu šoupnout dva SPANY, první s opacity 0, druhý s opacity 1 a při hoveru bude první s opacity 1, druhý s opacity 0. Je možné, že jsem něco opomenul, pokud bys s tím měl problém, tak se na to kouknu důkladně a udělám funkční příklad. |
||
|
Časová prodleva: 12 let
|
|||
0