Frage Hover über Text ändert inhalt eines Divs

frenchchris · 28 April 2015

Hallo,

ich versuche schon die ganze Zeit ein div so hinzubekommen, das wenn man mit der Maus über einen Text fährt (hover) das sich dann das Div ändert. Also so z.B.:

Code:

<head>
<title>Mein farbiges DIV</title>
<style>
#testdiv {
    background-color:#C5FEF5;
}
.rotertext, .blauertext, .gelbertext {
    font-weight:bold;
}
.gelbertext:hover #testdiv {
    background-color:#0000FF
}
.rotertext a:hover #testdiv {
    background-color:#0000FF;
}
.blauertext a:hover #testdiv {
    background-color:#0033FF !important;
}
</style>
</head>

<body>
<p><a href="#" class="rotertext">Das Div wird rot</a></p>
<p><a href="#" class="blauertext">Das Div wird blau</a></p>
<p class="gelbertext">Das Div wird gelb</p>
<p> </p>
<div id="testdiv"> Ich bin das div. </div>
</body>
</html>

Aber irgendwie bekomme ich es nicht hin. Jemand ne idee?

Vielen lieben Dank schon mal!

Gruß
Christine
frenchchris

djheke · 28 April 2015

So geht's

Code:

#testdiv {
  background-color:#C5FEF5;
}

.rotertext:hover ~ #testdiv {
  background-color:#f00 ;
}

.blauertext:hover ~ #testdiv {
  background-color:#0033FF ;
}

Code:

<p class="rotertext"><a href="#">Das Div wird rot</a></p>
<p class="blauertext" ><a href="#">Das Div wird blau</a></p>
<div id="testdiv">Text der sich färbt</div>

frenchchris · 28 April 2015

Danke *freu*

Frage Hover über Text ändert inhalt eines Divs

frenchchris

Neues Mitglied

djheke

Aktives Mitglied

frenchchris

Neues Mitglied

Neueste Beiträge