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 name="viewport" content="width=device-width, initial-scale=1">
<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><figure>hovern<br><figcaption>Text</figcaption><br></figure></code>
<figure>
<img src="/image/bell-003.png" alt="a kitten">
<figcaption class="fig1">diesen text kann man beim hovern lesen</figcaption>
</figure>
</div>
<div>
<h2> Direkter Nachbar-Selektor</h2>
<code><figure>hovern</figure><br><figcaption>Text</figcaption><br></code><br>
<figure>
<img src="/image/bell-003.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><figure>hovern</figure><br>
<div></div><br>
<div></div><br>
<figcaption>Text</figcaption></code><br>
<figure>
<img src="/image/bell-003.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><figure>hovern</figure><br>
<div></div><br>
<div></div><br>
<span><br>
<span><br>
<span> </span><br>
<span><br>
<div><br>
<figcaption>Text</figcaption>
</div><br>
</span><br>
</span><br>
</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="/image/bell-003.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>