CSS hover efekt na input submit – obrázek problikne

verified

(50 hodnocení)

26. 1. 2013 11:19:10

Ahoj,

chtěl bych poprosit o radu, jak se vypořádat s následujícím problémem. Na input submit button jsem aplikoval efekt změny pozadí při najetí myší. Vše pracuje v pořádku, akorát při prvním načtením stránky a následném najetí myši na tlačítko, obrázek "přeblikne". Po opětovném najetí (bez reloadu) myší na tlačítko již změna proběhne plynule.

kód CSS:

HTML

Velikost obou obrázků je 7 kB

Nevíte jak se tohoto prvotního probliknutí zbavit? Na pomalejším internetu je tato situace opravdu strašná.

Předem moc díky za reakce

Kuzmic

26. 1. 2013 11:19:10

https://webtrh.cz/diskuse/css-hover-efekt-na-input-submit-obrazek-problikne/#reply857895

verified

26. 1. 2013 11:20:50

Ahoj, použij techniku "css sprites".

Obrázky se zkombinují do jednoho a potom se jenom posouvají (tzn. jsou přednačtené a žádné "probliknutí" nenastane)

26. 1. 2013 11:20:50

https://webtrh.cz/diskuse/css-hover-efekt-na-input-submit-obrazek-problikne/#reply857894

Miloslav Lešetický

verified

(10 hodnocení)

26. 1. 2013 11:21:36

Vyrobíš si oba stavy jako jeden obrázek, a při hoveru měníš jen pozici. Viz ukázka a vysvětlení: http://wellstyled.com/css-nopreload-rollovers.html

26. 1. 2013 11:21:36

https://webtrh.cz/diskuse/css-hover-efekt-na-input-submit-obrazek-problikne/#reply857893

Lukáš Jurygáček

verified

(26 hodnocení)

26. 1. 2013 11:35:44

Ano, sprite je nejlepší způsob, jinak si můžeš obrázek s hover efektem vložit až před a dáš mu display: none

26. 1. 2013 11:35:44

https://webtrh.cz/diskuse/css-hover-efekt-na-input-submit-obrazek-problikne/#reply857892

verified

(50 hodnocení)

26. 1. 2013 12:48:56

Moc díky! Pomohlo to posunutí pozadí.

26. 1. 2013 12:48:56

https://webtrh.cz/diskuse/css-hover-efekt-na-input-submit-obrazek-problikne/#reply857891

Pro odpověď se přihlašte.

Prodej Více

Adult Inzerce – pro pracující dívky

9 900 Kč

0 příhozů

Kreativní Omalovánky – prodej digitálních produktů

20 000 Kč

0 příhozů

WatchOnlineBuy.com – Váš kompletní online obchod připraven k použití

200 €

0 příhozů

💸 Srovnavač půjček abpujcky.cz

50 000 Kč

0 příhozů

P: databáze všech domén (všechny TLD) s automaticky aktualizovaným WHOIS

1 000 Kč

0 příhozů

Poptávky Více

Hledám společníka pro provoz e-shopu

Zkušený PHP Symfony developer na dlouhodobou spolupráci

Poskytování programátorských služeb 2025

Programátorské a grafické úpravy našeho e-shopového řešení

PPC uprava nastaveni

Pracovní nabídky Více

VBA, MS Access expert (call on TUESDAY 17. 12., 1000 CZK – 3000 CZK for call)

Brno, České Budějovice, Hradec Králové, Jihlava, Karlovy Vary, Liberec, Olomouc, Opava, Ostrava, Pardubice, Plzeň, Práce z domu, Praha, Ústí nad Labem, Zlín

1 000 - 3 000 Kč

Systémový Administrátor

Software Architect

Hledáme React Native vývojáře na externí spolupráci

Práce z domu, Praha

Python developer

130 000 - 150 000 Kč

Nabídky Více

Nabídka na copywriting služby

Inzerce v novinách Nefrit na rok 2025 pro Zlínský kraj

⭐ Akce: napsání 5⭐ pozitivních recenzí pro Vaší firmu/eshop ❗ Pouze za 140Kč/recenze ❗

ŠÉFREDAKTORKA.CZ – Copywriting a obsah na míru

🌐💻📱Guava s.r.o. | Tvorba Webů, Aplikací, E-shopů, Mobilních aplikací, informačních systémů