Karl Moik: DIV in Navi behält Hintergrundfarbe beim Klick nicht

Beitrag lesen

SELF-Forum

DIV in Navi behält Hintergrundfarbe beim Klick nicht

Karl Moik
– Informationen zu den Bewertungsregeln

Hallo, wie die Überschrift schon besagt, behält mein DIV beim Anklicken nicht die Hintergrundfarbe:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beispiel 3: Navigationsleisten mit 'Rollover'</title>
  <style>
    body {
      font: normal 1em Helvetica, Arial, sans-serif;
    }
 
    nav ul {
      width: 10em;
      padding: 0.8em;
      border: 1px solid black;
      background-color: silver;
    }
 
    nav li {
      list-style: none;
      margin: 0.4em; 
    }
 
    nav a {
      display: block;
      padding: 0.4em;
      text-decoration: none; 
      font-weight: bold;
      border: 1px solid blue;
      color: gold; 
      background-color: royalblue; 
    }
 
    nav a:focus,
    nav a:hover {    
      color: royalblue; 
      background-color: gold;
      border-color: gold;
    }
	
.details {
	position: absolute;
	right: 1em;
	top: 1em;
	background-color: #F1F3F4;
	border: 0.1em solid #3983ab;
	border-radius: 0 8px 8px;
	padding: 1em 1em .2em;
	width: 22em;
	max-height: 20em;
	overflow: auto;
	display: none;
}

.details h3 {
	margin-top: 0;
}

.details:target {
	display: block;
}

.close {
	width: 0;
	heigh: 0;
	border: 0;
	text-shadow: none;
	color: transparent;
}

.close:after {
	position: absolute;
	top: 1em;
	right: 1em;
	content: "X";
	color: white;
	background: #c32e04;
	font: font: bold 1em/150% Georgia, Times, serif;
	border: 0.1em solid #3983ab;
	border-radius: 0 8px 8px;
	display: block;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	padding: 0.2em 0 0 0em;
}
</style>
</head>
 
<body>
 
  <nav>
    <ul>
      <li><a href="#d1">Beispiel 1</a></li>
      <li><a href="#d2">Beispiel 2</a></li>
      <li><a href="#r">Beispiel 3</a></li>
    </ul>
  </nav>
<div id="d1" class="details">
		<h3>Details zum 1. Eintrag</h3>
		<p>Hier stehen so viele Details, dass man um das Scrollen nicht drum rum kommt.</p>
		<p>Hier
			<br>ist
			<br>viel
			<br>Text
			<br>
		</p>
		<p>Hier
			<br>ist
			<br>viel
			<br>Text
			<br>
		</p>
		<p>Hier
			<br>ist
			<br>viel
			<br>Text
			<br>
		</p>
		<p>Hier
			<br>ist
			<br>viel
			<br>Text
			<br>
		</p> <a class="close" id="c1" href="#c1" title="schließen">schließen</a> </div>
	<div id="d2" class="details">
		<h3>Details zum 2. Eintrag</h3>
		<p>Das passt in das Element hinein, ohne dass gescrollt werden muss.</p> <a class="close"
		id="c2" href="#c2" title="schließen">schließen</a> </div>
		<div id="d3" class="details">
			<h3>Details zum 3. Eintrag</h3>
			<p>Auch ein Bild wäre kein Problem. <img src="http://src.selfhtml.org/forum/fachlich-hilfreich-32.png"
				alt="fachlich hilfreich">
			</p> <a class="close" id="c3" href="#c3" title="schließen">schließen</a> </div>
		
 
</body>
</html>

Wenn man auf Beispiel 1 oder 2 klickt, wird ein Info-DIV geöffnet, aber der Button Beispiel 1 und 2 behält beim Anklicken die Hintergrundfarbe gelb nicht.

Der letzte Button Beispiel 3 dagegen hat einen Blindverweis im href-Tag: Da bleibt die Farbe beim Anklicken gelb - was mach ich falsch, dass beim Anklicken von Beispiel 1 und 2 die Hintergrundfarbe nicht gelb bleibt?

Danke Karl M.

Beitrag melden
–
Informationen zu den Bewertungsregeln