Sponsor-Board.de

Hallo.

Ich möchte mit :hover einen Text ausblenden bzw. einblenden.
Standarts sind die Texte deaktiviert, geht man jedoch über Deutsch wird das display:none zu display:block.

HTML

Code:

            <div id="content">

<div class='content_de1'><p> Deutsch </p></div>

<div class='content_en1'><p> English </p></div>

<div class='content_de2'><p> Hallo </p></div>

<div class='content_en2'><p> Hello </p></div></div>

CSS

Code:

.content_de2 p,

.content_en2 p {

    display: none;

}

.content_de1 p:hover  .content_de2 p,

.content_en1 p:hover  .content_en2 p {

    display: block;

}

Funktionieren tut es aber nicht. Was übersehe ich?

Code:

.content_de1 p:hover  .content_de2 p,

.content_en1 p:hover  .content_en2 p {

sollte das nicht

Code:

.content_de1 p:hover, .content_en1 p:hover {

.content_de1 p:hover, .content_en1 p:hover {

bedeutet wenn content_de1 p ODER content_en1 p mit der maus berührt wird...

.content_de1 p:hover .content_de2 p,

das ist sowieso falsch, weil du entweder das komma vergessen hast oder content_de2 nicht in content_de1 drin ist

.content_de1 p:hover .content_de2 p bedeutet doch schon:
Gehe mit dem Maus über das p von content_de1, dann wird das p .content_de2 zu einem display: block.

nein

das müsstest du dan mit javascript lösen wenn du willst

An sich nutze ich diese Funktion bei ul li
<div class='menu'>
<ul>
<li>Menu1<ul><li>Untermenü1</li></li>
</ul>
</div>

.menu ul li ul { display:none}
.menu ul li:hover ul {display:block}

Dies funktiert!

uBasis

Sysix

Sysix

uBasis

Sysix

uBasis