Autor Zpráva
mezerap
Profil
Zdravím,

s responzivním webem ještě nemám moc zkušenosti, tak píši sem. Mám za úkol vytvořit webovou stránku, kde na hlavní stránce je logo. Při najetí myši na logo se kolem něj má vytvořit šestiúhelník s pozadím a logo změní barvu. Dále se má také jednat o responzivní prvek.
Napadlo mě použit DIV, kterému dát rozměr 400×400 px a background-image. S tím že kdž se na DIV najede myší, tak se background-image změní. Pokud by web nemusel být responzivní, tak by to nejspíš stačilo, ale v momentě, kdy se obrazovka zmenší, tak kvůli nastavené pevné šířce 400×400px, je část DIVu zakrytá. Proto jsem chtěl pracovat se samostatnými obrázky <img/>, z-index a display: none; ale po najetí myší začly oba obrázky problikávat a „to zlobilo”. Pak jsem ještě různě zkoušel tomu DIVu s background-image, jak jsem se zmiňoval výše, nastavit něco jako width: auto nebo 100%. Ale zřejmě proto, že DIV je prázdný a má pouze nadefinované pozadí, tak se nezobrazuje vůbec.

Mohl by mi prosím někdo poradit?
Děkuji.
Keeehi
Profil
Prosím o odkaz na živou ukázku.
Bubák
Profil
mezerap:
jsem chtěl pracovat se samostatnými obrázky <img/>, z-index a display: none;
Byl jsi na dobré stopě, jenže když tam obrázek není, ztratí hover a kvůli tomu to bliká. Existují dvě CSS vlastnosti, které mají podobný visuální efekt, visibility a opacity.

Ale zřejmě proto, že DIV je prázdný a má pouze nadefinované pozadí, tak se nezobrazuje vůbec.
Mám tušení, že výška takového DIVu bude jen pro jednořádkový text.

Koukni na Živá ukázka
Šířku si dáš (responzivně), kolik potřebuješ, výška se přizpůsobí

Zkusil jsem to i s obrázky napozicovanými na sebe a kupodivu v tomto případě není problém se zmizením obrázku pomocí display: none; ale nezkoušel jsem ve všech prohlížečích a doporučil bych horní obrázek při hoveru zneviditelnit pomocí visibility: hidden;
Živá ukázka
mezerap
Profil
Bubák:
Děkuji. Hodně mi to pomohlo!
Tomáš123
Profil
Bubák:
Zkusil jsem to i s obrázky napozicovanými na sebe a kupodivu v tomto případě není problém se zmizením obrázku pomocí display: none;
Akcia :hover je viazaná na nemiznúci element a.
Bubák
Profil
Tomáš123:
Akcia :hover je viazaná na nemiznúci element a.
Já nechal zmizet obrázek, proto zmizel i odkaz, předtím jsem to měl takhle:
Živá ukázka
Tohle řešení bliká, protože plocha odkazu je dána výškou a šířkou obrázku, a pokud je obrázek display: none, tak i odkaz má nulovou velikost. Pokud je požadována resposivita, tak je problém, kolik má být výška odkazu, aby byl zachován poměr stran obrázku.

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: