Es war schon gar nicht so einfach einen einigermaßen sinnvollen Thread-Titel zu erstellen, ganz zu schweigen von der fehlenden Lösung für mein Problem.
Ich habe zwei Links erstellt, die einen versteckten Text zum Vorschein bringen. Die Funktion an sich und das :hovern der Links funktioniert alles bestens.
Jetzt habe ich aber das Problem, dass ich gerne - wenn der Hidden Text erschienen ist - ich also den Link aktiviert habe, der Hovereffekt bestehen bleibt. So lange, bis ein andere Link aktiviert wurde. Da es ja kein Link auf eine andere Seite ist, komme ich mit :active, :visited, :Focus nicht weiter.
Gibt es da eine css Lösung oder muss auf andere Mittel zurückgegriffen werden?
Denke das es sicher mit javascript oder jQuery möglich ist, liegt aber zur zeit außerhalb meiner Kentnisse.
Ich habe zwei Links erstellt, die einen versteckten Text zum Vorschein bringen. Die Funktion an sich und das :hovern der Links funktioniert alles bestens.
Jetzt habe ich aber das Problem, dass ich gerne - wenn der Hidden Text erschienen ist - ich also den Link aktiviert habe, der Hovereffekt bestehen bleibt. So lange, bis ein andere Link aktiviert wurde. Da es ja kein Link auf eine andere Seite ist, komme ich mit :active, :visited, :Focus nicht weiter.
Gibt es da eine css Lösung oder muss auf andere Mittel zurückgegriffen werden?
Denke das es sicher mit javascript oder jQuery möglich ist, liegt aber zur zeit außerhalb meiner Kentnisse.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css">
<title>Hover Effekt</title>
</head>
<body>
<main>
<div id="box1" class="box">
<a class="show" href="#box1">Hidden Text 1</a>
<div class="inhalt1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, quas?</div>
</div>
<div id="box2" class="box">
<a class="show" href="#box2">Hidden Text 2</a>
<div class="inhalt2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde, reiciendis?</div>
</div>
</main>
</body>
</html>
Code:
#box1:not(:target) .inhalt1,
#box2:not(:target) .inhalt2 {
opacity: 0;
}
#box1:target .inhalt1,
#box2:target .inhalt2 {
opacity: 1;
transition: opacity 2s;
}
main {
display: flex;
margin: 50px 0 0 50px;
}
.box {
position: relative;
}
.box a:hover {
background-color: cornflowerblue;
}
.show {
border: 1px solid #000;
padding: 15px 25px;
margin-right: 15px;
}
.inhalt1,
.inhalt2 {
color: #666;
position: absolute;
top: 150px;
left: 0;
width: 400px;
}
