Hallo, ich komme grade nicht weiter bei meinem Problem,
sicher ist es nur ne Kleinigkeit aber irgend wie will es nicht so recht.
Ich habe vor einen Austauschbaren Infobereich zu machen, welcher einen Standarttext wiedergibt und sobald man mit der Maus über eine in der Seite angezeigten Link fährt soll der Infobereich mit einem neuem Ausgetauscht werden.
geht man wieder vom Link herunter wird der alte Informationstext angezeigt.
Ich hoffe jemand kann sich meine Sache mal kurz vornehmen, wäre sehr Dankbar.
hier meine HTML Strucktur:
und die vom CSS
Vielen Dank schonmal im Vorraus für jede Unterstützung
mfg Lyth
sicher ist es nur ne Kleinigkeit aber irgend wie will es nicht so recht.
Ich habe vor einen Austauschbaren Infobereich zu machen, welcher einen Standarttext wiedergibt und sobald man mit der Maus über eine in der Seite angezeigten Link fährt soll der Infobereich mit einem neuem Ausgetauscht werden.
geht man wieder vom Link herunter wird der alte Informationstext angezeigt.
Ich hoffe jemand kann sich meine Sache mal kurz vornehmen, wäre sehr Dankbar.
hier meine HTML Strucktur:
HTML:
<section id="main">
<article>
<haupt>
<h2>Hauptinformationstext</h2>
<h2>Hauptinformationstext</h2>
</haupt>
<Sec1>
<h2> Dies ist ein Testtext, welcher erscheint wenn man über den Link 1 Button fährt</h2>
</Sec1>
<Sec2>
<h2> Dies ist ein Testtext, welcher erscheint wenn man über den Link 2 Button fährt</h2>
</Sec2>
<Sec3>
<h2> Dies ist ein Testtext, welcher erscheint wenn man über den Link 3 Button fährt</h2>
</Sec3>
<Sec4>
<h2> Dies ist ein Testtext, welcher erscheint wenn man über den Link 4 Button fährt</h2>
</Sec4>
</article>
<box>
<section>
<a class="menubutton1" href="#menu"><img src="images/Link1.png"/></a>
</section>
<section>
<a class="menubutton2" href="#menu"><img src="images/Link2.png"/></a>
</section>
<section>
<a class="menubutton3" href="#menu"><img src="images/Link3.png"/></a>
</section>
<section>
<a class="menubutton4" href="#menu"><img src="images/Link4.png"/></a>
</section>
</box>
</section>
und die vom CSS
Code:
/* Austauschbarer Infobereich */
#main article haupt {
display: block;
background-color: #808080;
}
#main article Sec1 {
display: none;
background-color: #808080;
}
#main article Sec2 {
display: none;
background-color: #808080;
}
#main article Sec3 {
display: none;
background-color: #808080;
}
#main article Sec4 {
display: none;
background-color: #808080;
}
#main box section .menubutton1:hover > #main article haupt{
display: none;
}
#main box section .menubutton1:hover > #main article Sec1{
display: block;
}
#main box section .menubutton1:hover > #main article Sec2{
display: block;
}
#main box section .menubutton1:hover > #main article Sec3{
display: block;
}
#main box section .menubutton1:hover > #main article Sec4{
display: block;
}
/*Ende von Austauschbarer Infobereich */
Vielen Dank schonmal im Vorraus für jede Unterstützung
mfg Lyth