kostenloser Webspace werbefrei: lima-city


hover problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    scrypt

    scrypt hat kostenlosen Webspace.

    Bin mir nicht sicher, ob das möglich ist, vielleicht kennt jemand eine Lösung.
    Folgender HTML-Code ist gegeben

    <div class="a">
         <span>Titel</span>
         <p>Inhalt</p>
    </div>

    Der Inhalt von
    <p>
    ist standardmäßig ausgeblendet, also
    .a p {visibility:hidden;}
    . Nun frage ich mich, ob es einen reinen CSS-Weg gibt, um bei
    .a span:hover
    den Inhalt
    .a p {visibility:visible;}
    zu setzen?

    Beitrag zuletzt geändert: 29.11.2013 13:16:25 von scrypt
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Jain, so wie du es dir vorstellst direkt ist es nicht möglich, dazu müsste "p" ein Element von "span" sein. Wenn das der Fall ist funktioniert es. Das :hover muss sich auf das nächsthöhere Element beziehen.

    Lösung mit "p" Element von ".a"
    http://jsfiddle.net/GeQpM/1/

    Lösung mit "p" Element von "span"
    http://jsfiddle.net/GeQpM/2/

    Beitrag zuletzt geändert: 29.11.2013 13:25:20 von tchab
  4. tchab schrieb:
    Jain, so wie du es dir vorstellst direkt ist es nicht möglich,

    Doch, es ist möglich. :wink:

    .a p{
    	height:0px;
    	overflow: hidden;
    }
    .a span:hover+ p{
    	overflow: visible;
    }


    Nachtrag: funktioniert doch nicht perfekt.

    Die Anzeige des p wird zwar unterdrückt, aber nachfolgende Elemente sind immer um die Höhe von p nach unten verschoben.

    So funktioniert es:

    .a p{
    	display: none;
    }
    .a span:hover+ p{
    	display: block;
    }


    Beitrag zuletzt geändert: 29.11.2013 15:28:14 von fatfreddy
  5. Autor dieses Themas

    scrypt

    scrypt hat kostenlosen Webspace.

    fatfreddy schrieb:
    tchab schrieb:
    Jain, so wie du es dir vorstellst direkt ist es nicht möglich,

    Doch, es ist möglich. :wink:

    .a p{
    	height:0px;
    	overflow: hidden;
    }
    .a span:hover+ p{
    	overflow: visible;
    }


    Nachtrag: funktioniert doch nicht perfekt.

    Die Anzeige des p wird zwar unterdrückt, aber nachfolgende Elemente sind immer um die Höhe von p nach unten verschoben.

    So funktioniert es:

    .a p{
    	display: none;
    }
    .a span:hover+ p{
    	display: block;
    }



    Ich fasse es nicht, das geht ja wirklich O_O
    Hab auch schon mal "<,>" Zeichen in einem CSS gesehen, kann aber leider nicht sagen welchen Zweck sie erfüllen, Aber "+" habe ich noch nirgends gesehen. Wie kommt man denn an dieses Wissen, auf eine Anlaufstelle für solche Features in CSS bin ich bisher noch nicht gestoßen :-)

    Edit:Gesuchte Anlaufstelle siehe Wiki-Eintrag, danke @tchab :-)



    Beitrag zuletzt geändert: 2.12.2013 10:45:02 von scrypt
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!