Autor Zpráva
Sennin
Profil
Zdravím....
mám zobrazenie a skrývanie div-u pomocou css po rade od Keeehi konkrétne tu No a aby toho nebylo málo, tak existují postupy, jak udělat to skrývání a odkrývání po kliknutí jen čistě s CSS.

Všetko je funkčné teda ak testujem kód takto:
Html
<a id="show" class="toogler-link" href="#">
            Zobraz
        </a>
        <a id="hide" class="toogler-link" href="#">
            Skry
        </a>
A Css
.navigation {display: none;}
#show:focus, #hide {display: none;}
#show:focus + #hide {display: block;}
#show:focus ~ .navigation {display: block;width: 100%;}
#hide:focus ~ .navigation {display: none;}
@media print {#show, #hide {display: none;}}
.navigation {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 280px;
    height: auto;
    min-height: 100%;
    background-color: #d9534f;
    opacity: .9;
    z-index: 1001;
}
Ale problém nastáva a s tým sa bijem už zhruba tak 17 hodín ak link-y obalím do ďalších div-ov to už nezobrazí/neskryje nič
Html
<div class="hide-this">
                        <div class="col-sm-12 col-xs-12">
                            <div class="toogler">
                                <a href="#" class="toogler-link" id="show">
                                    Zobraziť
                                </a>
                                <a href="#" class="toogler-link" id="hide">
                                    Skry
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="navigation">
            <div class="row">
                <div class="col-md-12">
                    
                </div>
            </div>
        </div>
A Css
.navigation {display: none;}
#show:focus, #hide {display: none;}
#show:focus + #hide {display: block;}
#show:focus ~ .navigation {display: block;width: 100%;}
#hide:focus ~ .navigation {display: none;}
@media print {#show, #hide {display: none;}}
.navigation {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 280px;
    height: auto;
    min-height: 100%;
    background-color: #d9534f;
    opacity: .9;
    z-index: 1001;
}
Je to isté bez zmeny...
Moja otázka teda znie:
Prečo sakra ak to obalím to nefičí? som s toho už na nervy....
Ak ste už riešili podobný problém alebo viete kde sa to riešilo bude za všetko Vďačný
Keeehi
Profil
Je to jednoduché, ty jsi selektorem zacílil ten odkaz. Elementy, které můžeš ovlivnit bude on sám a jeho potomci. Ne však jeho rodiče, takže tomu obalu CSS nezměníš.
jefitto44
Profil
Daj selektor, ktorý bude vyberať obal, nie odkaz samotný...
Tomáš123
Profil
Sennin:
S takouto HTML štruktúrou nejde prvok .navigation zamerať (s ohľadom na udalosť na prvku) z #hide resp. #show. Nadradený prvok nejde použiť, lebo udalosť :focus nefunguje na každom prvku. Bez pseudoelementutriedy to taktiež nepôjde, lebo v CSS ide ovplyvňovať iba prvky na tej istej alebo nižšej úrovni.

Nerozumiem, prečo bolo nutné meniť štruktúru, keď prvok, ktorý zobrazuješ je aj tak absolútne poziciovaný na to isté miesto. Alebo to iba v tejto ukážke? Ak áno, a štruktúra sa už ďalej nebude prispôsobovať, môžeš ešte skúsiť počarovať s <labelom> (teraz nemám čas skúšať, či by to mohlo fungovať). Ak nebude použiteľné ani toto, budeš musieť späť k JavaSricptu.

Navrhoval by som ti pokračovať v starom vlákne. Človek sa musí zbytočne preklikávať a riešiš vlastne to isté.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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