| Autor | Zpráva | ||
|---|---|---|---|
| mezerap Profil |
#1 · Zasláno: 5. 1. 2018, 16:43:25
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 |
#2 · Zasláno: 5. 1. 2018, 18:24:16
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 |
#4 · Zasláno: 6. 1. 2018, 13:41:34
Bubák:
Děkuji. Hodně mi to pomohlo! |
||
|
Časová prodleva: 4 dny
|
|||
| Tomáš123 Profil |
#5 · Zasláno: 10. 1. 2018, 18:32:35
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 |
#6 · Zasláno: 10. 1. 2018, 19:06:36
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.
|
||
|
Časová prodleva: 6 let
|
|||
0