Autor Zpráva
jirka0376
Profil
#1 · Zasláno: 9. 8. 2015, 22:50:08
Odpovědět Citovat
Zdravím všechny,

potřeboval bych poradit, kde dělám chybu.

Mám odkaz a pod ním div. Div má nastaven style="display: none". Když přesunu myš na odkaz tak se změní display divu na style="display: block" a správně se mi ukáže. Kliknu na odkaz a otevře se nová stránka v aktuálním okně. Když pak použiji tlačítko "Zpět" v prohlížeči a nechám na něm ukazatel myši, tak se mi sice vrátí předchozí stránka, ale ":hover" efekt zůstává aktivní a div je zobrazený do té doby, než přesunu ukazatel myši kamkoli na stránku.

Díky předem za jakoukoli použitelnou radu, už hledám dost dlouho a stále jsem nic nenašel.
sitole
Profil
#2 · Zasláno: 10. 8. 2015, 08:53:46
Odpovědět Citovat
jirka0376:
Můžeme požádat o kus kodu na živou ukázku? Nevíme přesně, jak to máš vytvořené..
juriad
Profil
#3 · Zasláno: 10. 8. 2015, 08:57:22
Odpovědět Citovat
jirka0376:
Podle toho, co píšeš nejde o hover, ale nějakou tvou náhradu pomocí JS, která přepíná vlastnost display. Pak je očekávané, že při tlačítku zpět se stránka zobrazí přesně ve stavu, ve kterém jsi jo opustil (pokud je ještě v paměti prohlížeče).
Zkus ten "hover" neodstraňovat jen při onmouseleave, ale i při onclick.
Tomáš123
Profil
#4 · Zasláno: 10. 8. 2015, 09:11:27
Odpovědět Citovat
jirka0376:
Prípadne tu je ešte možnosť, že na zobrazenie menu používaš okrem :hoveru aj :focus, čo vyvoláva podobné správanie.
jirka0376
Profil
#5 · Zasláno: 10. 8. 2015, 12:41:44 · Upravil/a: jirka0376 o 11 minut později
Odpovědět Citovat
Zatím sem dám ukázku přímo ze svých webových stránek. Odkazy jsou nadpisy okolo kruhu. JavaScript zatím nepouzivam > opravdu jen :hover.

Dělá mi to Firefox a Safari. Naopak IE, Google chrom a Opera to nedělá.

Z toho mi vychází, zda to není nějaké nastavení prohlížeče.

Tady je kód úvodní stránky: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Jiří Huňáček - Trade</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

<!-- ---------------------------------------------------------------------- STYLES ---------------------------------------------------------------------- -->

<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" />

<style type="text/css">
    
/* -------------------------------------------------------------- Zobrazení DIVů pod odkazy -------------------------------------------------------------- */
    
    #sp1:hover ~ #spd1 { display: block !important }
    #sp2:hover ~ #spd2 { display: block !important }
    #sp3:hover ~ #spd3 { display: block !important }
    
    #sl1:hover ~ #sld1 { display: block !important }
    #sl2:hover ~ #sld2 { display: block !important }
    #sl3:hover ~ #sld3 { display: block !important }

/* ------------------------------------------------------------------- Nastavení odkazů ------------------------------------------------------------------ */
    
    .sluzby { text-decoration: none }
    .sluzby:hover { font-weight: bold }
    
    .s1:hover { border-bottom: 1px #90B92F solid; border-top: 1px #90B92F solid }
    .s1:hover div { visibility: visible }
    .s2:hover { border-bottom: 1px #D39049 solid; border-top: 1px #D39049 solid }
    .s3:hover { border-bottom: 1px #A02230 solid; border-top: 1px #A02230 solid }
    .s3:hover > .a1 { display: block }
    .s4:hover { border-bottom: 1px #44A0C9 solid; border-top: 1px #44A0C9 solid }
    .s5:hover { border-bottom: 1px #3A3CC5 solid; border-top: 1px #3A3CC5 solid }
    .s6:hover { border-bottom: 1px #BB3F85 solid; border-top: 1px #BB3F85 solid }

/* -----------------------------------------------------------------stavení odkazů v HEADERu ------------------------------------------------------------- */
    
    .akce:hover { line-height: 24px; border-bottom: 3px #A7C0FF solid; border-top: 3px #A7C0FF solid; background-color: white; color: red !important; }
    .novinky:hover { line-height: 24px; border-bottom: 3px #A7C0FF solid; border-top: 3px #A7C0FF solid; background-color: white; color: red !important; }
    
</style>


</head>

<body>

<!-- ---------------------------------------------------------------------- HEADER ---------------------------------------------------------------------- -->

<div class="header">
    <?php
        include("header.php");
    ?>
</div>

<!-- ---------------------------------------------------------------------- CONTENT --------------------------------------------------------------------- -->

<div class="content">
    
    
    <div class="content_right_start">
        <div style="width: 375px; height: 30px; padding-top: 100px">
            <div id="sp1" style="width: 355px; margin-left: 20px">
                <a class="sluzby s1" style="display: block; font-family: Verdana; font-size: 20px; color: #90B92F" href="zahrada.php">Zahradní služby</a>
            </div>
            <div id="spd1" style="width: 333px; line-height: 15px; margin-left: 40px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;">sekání a úklid zahrad (tráva, listí)<br/>řezání stromů<br/>...</div>
        </div>
        
        <div style="width: 375px; height: 30px; padding-top: 80px">
            <div id="sp2" style="width: 315px; margin-left: 60px">
                <a class="sluzby s2" style="display: block; font-family: Verdana; font-size: 20px; color: #D39049" href="opravy.php">Drobné opravy</a>
            </div>
            <div id="spd2" style="width: 293px; line-height: 15px; margin-left: 80px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;"></div>
        </div>
        
        <div style="width: 375px; height: 30px; padding-top: 80px">
            <div id="sp3" style="width: 355px; margin-left: 20px">
                <a class="sluzby s3" style="display: block; font-family: Verdana; font-size: 20px; color: #A02230;" href="#"></a>
            </div>
            <div id="spd3" style="width: 333px; line-height: 15px; margin-left: 40px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;"></div>
        </div>
    </div>
    
    <div class="content_middle_start">
        <div style="width: 600px; height: 450px; display: table-cell;text-align: center; vertical-align: middle">
            <img src="images/services.png" alt="Služby"/>
        </div>
    </div>
    
    <div class="content_left_start">
        <div style="width: 375px; height: 30px; padding-top: 100px">
            <div id="sl1" style="width: 355px; margin-right: 20px">
                <a class="sluzby s4" style="display: block; font-family: Verdana; font-size: 20px; color: #44A0C9" href="uklid.php">Úklidové služby</a>
            </div>
            <div id="sld1" style="width: 333px; line-height: 15px; margin-right: 40px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;">jednorázové a pravidelné, běžné i generální<br/>úklidy bytů, bytových domů a RD<br/>...</div>
        </div>
        
        <div style="width: 375px; height: 30px; padding-top: 80px">
            <div id="sl2" style="width: 315px; margin-right: 20px">
                <a class="sluzby s5" style="display: block; font-family: Verdana; font-size: 20px; color: #3A3CC5" href="domacnost.php">Domácí práce</a>
            </div>
            <div id="sld2" style="width: 293px; line-height: 15px; margin-right: 40px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;">praní, žehlení a zašívání prádla<br/>nákup potravin a vaření<br/>...</div>
        </div>
        
        <div style="width: 375px; height: 30px; padding-top: 80px">
            <div id="sl3" style="width: 355px; margin-right: 20px">
                <a class="sluzby s6" style="display: block; font-family: Verdana; font-size: 20px; color: #BB3F85" href="#"></a>
            </div>
            <div id="sld3" style="width: 333px; line-height: 15px; margin-right: 40px; padding-top: 10px; font-family: Verdana; font-size: 12px; font-style: italic; display: none;"></div>
        </div>
    </div>

</div>

<!-- ---------------------------------------------------------------------- FOOTER ---------------------------------------------------------------------- -->

<div class="footer">
    <?php
        include("footer.php");
    ?>
</div>

</body>

</html>
jirka0376
Profil
#6 · Zasláno: 10. 8. 2015, 20:47:21
Odpovědět Citovat
Ještě mám jeden dotaz. Jde mi o velikost písma, které mám nastaveno na font-size: 10px;.

Teď jsem prohlížel stránky ve všech pěti prohlížečích, co mám, čili FF v39.0.3, IE v11, Opera v31, Google Chrome v44 a Safari v5.1.7.

Ve FF a Safari se ukazuje písmo stejně velké, ale v ostatních je menší. Opticky mi přijde, že je menší asi o 2px.

Nevíte, co s tím? Logicky si myslím, že když mám stejný monitor, tak by mělo být písmo všude stejně velké.

To samé se mi dějě u <br style="line-height: 10px">. Ve FF mi to zobrazí mezeru mezi textem o velikosti 10 pixelů a např. v CHROMU mi to neudělá mezeru žádnou.
lionel messi
Profil
#7 · Zasláno: 10. 8. 2015, 20:53:47
Odpovědět Citovat
jirka0376:
„Ve FF a Safari se ukazuje písmo stejně velké, ale v ostatních je menší. Opticky mi přijde, že je menší asi o 2px.“

Stránky máš v tzv. quirk móde, používaj štandardný doctype, čiže na úplný začiatok každej stránky napíš: 

<!doctype html>
jirka0376
Profil
#8 · Zasláno: 11. 8. 2015, 12:17:01
Odpovědět Citovat
lionel messi:
Dík, tohle pomohlo ve všech prohlížečích, akorát v IE je to stále asi o 1-2 pixely menší.
Chamurappi
Profil
#9 · Zasláno: 11. 8. 2015, 13:27:57 · Upravil/a: Chamurappi o 2 minuty později
Odpovědět Citovat
Reaguji na lionela messiho:
„Stránky máš v tzv. quirk móde, používaj štandardný doctype“
Neviděl jsem stránky před tím, ale pokud měly kód uvedený v příspěvku [#5], tak nejely v quirku.
Krom toho mě zaujal tvůj odkaz na specifikaci… on je to vlastně můj odkaz, vytáhl se předpokládám z JUSHe, kam jsem systém HTML 5 adres zadrátoval já. Jsem si ale celkem jistý, že na stránce o Text-level semantics nikdy <!doctype> popsaný nebyl :-)


Reaguji na jirku0376:
„Ve FF a Safari se ukazuje písmo stejně velké, ale v ostatních je menší. Opticky mi přijde, že je menší asi o 2px.“
Nedodal bys obrázky? Explorer dělá obvykle o kousíček větší mezery mezi písmenky, než ostatní prohlížeče, takže v něm zpravidla spíš písmo vypadá větší.
Proč potřebuješ přesnou velikost písma? A ještě k tomu tak maličkou. Uživatel si ji stejně může přenastavit (vyjma Exploreru, kde to znemožňuješ použitím jednotky px na font-size). V některých prohlížečích také jde nastavit minimální velikost písma.

Mimochodem, mnohapomlčkové komentáře v HTML můžou být trochu nebezpečné. (Což ale nikdy nezpůsobí problém, který teď řešíš.)
jirka0376
Profil
#10 · Zasláno: 11. 8. 2015, 20:09:02
Odpovědět Citovat
Chamurappi:
Ok, komentáře jsem udělal menší, pouze <!-- text -->, to bude stačit. :-) Písmo jsem dal na font-size: 11px;, sice je v IE o kousíček menší, když přepínám mezi FF a IE, ale takhle, jako já, to stejně nikdo dělat nebude a číst se dá. Mimochodem je to v patičce stránky (copyright a další věci - mapa stránek, o nás atd.) a to jsem obvykle vždy viděl menším písmem.

Spíš by mne ale zajímalo to původní téma s :hover efektem [#1] jirka0376, dle ukázky [#5] jirka0376, zda-li nevíš nebo kde najít jak to vyřešit.
Časová prodleva: 17 dní
jirka0376
Profil
#11 · Zasláno: 28. 8. 2015, 08:52:19
Odpovědět Citovat
Zdravím,

stále mám ten samý problém viz bod [#1] jirka0376. Nemá někdo nějaký nápad, prosím?
Davex
Profil
#12 · Zasláno: 29. 8. 2015, 00:10:58
Odpovědět Citovat
Nevím, proč to funguje a jestli je to dostatečně univerzální, ale vypadá to, že s tímto malým JavaScriptem na stránce se Firefox v historii vrací bez pamatování stavu hoverů či focusů. 

<script>
  window.onunload=function(){}
</script>
Časová prodleva: 12 dní
jirka0376
Profil
#13 · Zasláno: 9. 9. 2015, 12:58:37
Odpovědět Citovat
[#12] Davex
Děkuji mnohokrát, opravdu to funguje. Ještě to vyzkouším na ostatní prohlížeče, kde mi to dělalo.

Takže ještě jednou moc díky.

Jirka
Časová prodleva: 9 let

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:

0