✔ div-Hintergrund bei hover über Link ändern

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo und guten Abend,

ich habe 2 div-container. In dem einen sind verschiedene Links und das andere ist einfach nur farbig.
Ich möchte es nun so realisieren, dass sich die Farbe des zweiten div-containers durch das Überfahren der Links im ersten mit der Maus ändert.

Leider bekomme ich es nicht hin, das "hover" der Links richtig anzuwenden. Ich bin der Auffassung, dass ich mehrere classes miteinander verknüpfen muss. Nur wie :confused:

Hier mein Ansatz:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.vorschau
{
width:150px;
background-color:#FFCCCC;
border:1px;
float:left;
}

.wechseln a:hover .ansicht
{
background-color:#FFFF00;
}

.ansicht
{
position: fixed;
top: 200px;
left: 600px;
height:200px;
width:200px;
background-color:#00FF00;
border:1px;
z-index:1;
}
</style>

  </head>
  <body>
  <div>
    <div class="vorschau">
    <a href="#" class="wechseln">Testlink</a>
    </div>
    <div class="ansicht"></div>    
  </div>  
  </body>
</html>
Ich danke für jegliche Anregungen...
 
Probier es mal folgendermaßen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.vorschau
{
width:150px;
background-color:#FFCCCC;
border:1px;
float:left;
}

#ansicht
{
position: fixed;
top: 200px;
left: 600px;
height:200px;
width:200px;
border:1px;
z-index:1;
}

.normal {
background-color:#00FF00;
}

.hover {
background-color:#FFFF00;
}
</style>

  </head>
  <body>
  <div>
    <div class="vorschau">
    <a href="#" class="wechseln" onmouseover="document.getElementById('ansicht').className='hover'" onmouseout="document.getElementById('ansicht').className='normal'">Testlink</a>
    </div>
    <div id="ansicht" class="normal"></div>
  </div>
  </body>
</html>
 
Weil sich meines Wissens dein Vorhaben in dieser Konstellation mit CSS alleine nicht umsetzen lässt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück