Autor Zpráva
byxáž
Profil *
Ahoj, mám problém: po najetí na "Vyškov" a "Ostrava" by to mělo zobrazit popisek "Tady bude adresa na Vyškov." a "Tady bude adresa na Ostravu." ale nějak mi to nefunguje (viz. stránka), v čem je problém?

tu je odkaz na stránku
tu je html:
<header id="masthead" class="site-header" role="banner">
<div>
<h2 class="site-description">

<a>Vyškov</a><p class="about">Tady bude adresa na Vyškov.</p>
<p>a</p>
<a>Ostrava</a><p class="about">Tady bude adresa na Ostravu.</p>
</h2>

</div>

tu je css:
#masthead .site-description a {
hover .about {display: block; padding: .3em; background: #fff; border: 1px solid #ccc};
hover > a {background: #107FDB};
hover {border-color: #fff};
}
Kolemjdoucí
Profil *
Nechybí ti tam :hover ? Nejspíš to píšeš v nějakém preprocessoru. Možná ještě &:hover. Nevím, v čem to píšeš, jen tipuju.
byxáž
Profil *
wordpress, jestli myslíš toto


a ani jedno bohužel nepomohlo :(
Kolemjdoucí
Profil *
Nemyslím wordpress, ale css. Jestli to je "čisté" css (bez preprocessoru) tak by to mělo být takto (podle toho, co píšeš výše):

#masthead .site-description a:hover .about {display: block; padding: .3em; background: #fff; border: 1px solid #ccc};
#masthead .site-description a:hover > a {background: #107FDB};
#masthead .site-description a:hover {border-color: #fff};
byxáž
Profil *
jak poznám, jestli je to bez preprocessoru? zkoušel jsem ten tvůj kód, ale bez výsledku :(
Kolemjdoucí
Profil *
tak pošli živou ukázku :) víc už ti poradit nejde bez náhledu.
byxáž
Profil *
mám to úplně na začátku v 1. dotazu: tu je odkaz na stránku
Tomáš123
Profil
byxáž:
Len pre upresnenie:
Chceš, aby sa po nájdení myšky na položku "Vyškov" objavil text "Tady bude adresa na Vyškov.". A po nájdení myšky na položku "Ostrava" objavil text "Tady bude adresa na Ostravu."

Teraz máš na stránke takýto kód (skrátená verzia):
<h2 class="site-description">
    <a></a>
    <p class="about"></p>
    <p></p>
    <a></a>
    <p class="about"></p>

Aby sa niečo dialo a nemusel si vymýšľať zložité selektory, prerob HTML takto:

<h2 class="site-description">
    <a>Vyškov
      <p class="about">Tady bude adresa na Vyškov.</p>
    </a>
    <p>a</p>
    <a>Ostrava
    <p class="about">Tady bude adresa na Ostravu.</p>
    </a>

A CSS urob asi takto:

a p {
    visibility: hidden;
}
a:hover p {
    visibility: visible;
}

Možno ti pomôže živá ukážka: http://kod.djpw.cz/mbeb
byxáž
Profil *
jo díky, to funguje, ale ještě je problém v tom, že když najedu na to skrytý "Tady bude adresa na Vyškov." nebo to s Ostravou, tak se to taky zobrazí
lionel messi
Profil
byxáž:
Skús zameniť visibility hidden/visible za display none/block. Viď Živá ukázka. Problémom samozrejme je, že display: none skryje úplne, čiže to trochu „cuká“ (v tom sa táto vlastnosť líši od visibility: hidden.
Tomáš123
Profil
byxáž:
Jasné, to som si nevšimol. Takto by to už malo fungovať správne: http://kod.djpw.cz/obeb

lionel messi:
Skús zameniť visibility hidden/visible za display none/block.
Akurát sa mení geometria.
byxáž
Profil *
šlo by to Vyškov a Ostrava dat na jeden řádek?
byxáž
Profil *
tak už nic, díky všem za rady, ale nakonec jsem původní nápad předělal

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: