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
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
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 *
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: