kostenloser Webspace werbefrei: lima-city

hover problem

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   scrypt

   scrypt hat kostenlosen Webspace.

   13:13, 29.11.2013

   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. tchab

   tchab hat kostenlosen Webspace.

   13:24, 29.11.2013

   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. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   15:06, 29.11.2013

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

   
   Doch, es ist möglich.
   
   

   .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.

   10:34, 2.12.2013

   fatfreddy schrieb:
   

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

   
   Doch, es ist möglich.
   
   

   .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?