Mouseover in CSS

Habe ich eine Seite angelegt, die mit mouseover Effekt verschiedene Boxen vergrößert. Unter der mittleren Box steht jetzt ein text "fff". Wie schaffe ich es, dass dieser Text nicht sichtbar ist, sondern erst erscheint während ich mit dem Cursor über der grünen Box bin? Ich schaffe es zwar, es zu programmieren, dass Box und Text einen eigenen mouseover haben, aber ich bekomme es nicht so hin, wie oben gewünscht.

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <title>Hello!</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="script/reset.css"> <link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet"> <style> main{ display:flex; } code{ border:1px solid grey; } man div{ display:flex; flex:1; flex-direction:column: } body{ height:1400px; } img { width:100%; border:4px solid green; } figure:hover { transform: scale(1.05); cursor: grab; z-index:2; } figure{ width: 200px; overflow:hidden; height: 200px; transition: .3s ease-in-out; } figcaption{ height:50px; border:2px solid red; width:200px; text-align:center; font-size:22px; color:green; opacity:0; font-weight:900; } figure:hover > .fig1{ opacity:1; margin-top:-120px; transition:1s all; } figure:hover + .fig2{ opacity:1; position:relative; z-index:9999; margin-top:-120px; transition:1s all; } hr{ clear:both; } figure:hover ~ .fig3{ opacity:1; position:relative; z-index:9999; margin-top:-120px; transition:1s all; } figure:hover + div ~ div + span > span > span > div > .fig4{ opacity:1; position:relative; z-index:9999; background:red; height:40px; width:400px; border:5px solid red; margin-top:-120px; transition:1s all; } /* oder leichter figure:hover + #fig4{ opacity:1; position:relative; z-index:9999; background:red; height:40px; width:400px; border:5px solid red; margin-top:-120px; transition:1s all; } */ </style> </head> <body> <header> </header> <main class="main"> <div> <h2> Kind-Selektor | Child </h2> <code>&lt;figure>hovern<br>&lt;figcaption>Text&lt;/figcaption><br>&lt;/figure></code> <figure> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="a kitten"> <figcaption class="fig1">diesen text kann man beim hovern lesen</figcaption> </figure> </div> <div> <h2> Direkter Nachbar-Selektor</h2> <code>&lt;figure>hovern&lt;/figure><br>&lt;figcaption>Text&lt;/figcaption><br></code><br> <figure> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="a kitten"> </figure> <figcaption class="fig2">diesen text kann man beim hovern lesen</figcaption></div> <div> <h2> Indirekter oder allgemeiner Nachbar-Selektor </h2> <code>&lt;figure>hovern&lt;/figure><br> &lt;div>&lt;/div><br> &lt;div>&lt;/div><br> &lt;figcaption>Text&lt;/figcaption></code><br> <figure> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="a kitten"> </figure> <div></div> <div></div> <figcaption class="fig3">diesen text kann man beim hovern lesen</figcaption></div> </main> <h2>So kann man auch sehr weitverschachteln</h2> <code>&lt;figure>hovern&lt;/figure><br> &lt;div>&lt;/div><br> &lt;div>&lt;/div><br> &lt;span><br> &lt;span><br> &lt;span> &lt;/span><br> &lt;span><br> &lt;div><br> &lt;figcaption>Text&lt;/figcaption> &lt;/div><br> &lt;/span><br> &lt;/span><br> &lt;/soan><br> </code><br> <p>Einmal kompliziert <br><code>figure:hover + div ~ div + span > span > span > div > .fig4{</code></p> <p>oder leicht<br><code>figure:hover + #fig4{</code></p> <figure> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png"> </figure> <div></div> <div></div> <span> <span> <span></span> <span><div><figcaption id="fig4" class="fig4">Weit verschachtelt</figcaption></div></span> </span> </span> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!