Austauschbarer Inhalt mit Mouseover

[Lythis]

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:

<section id="main">
        <article>
            <haupt>
            <h2>Hauptinformationstext</h2>
            <h2>Hauptinformationstext</h2>
            </haupt>
            <Sec1>
                <h2> Dies ist ein Testtext, welcher erscheint wenn man &uuml;ber den Link 1 Button f&auml;hrt</h2>
            </Sec1>
            <Sec2>
                <h2> Dies ist ein Testtext, welcher erscheint wenn man &uuml;ber den Link 2 Button f&auml;hrt</h2>
            </Sec2>
            <Sec3>
                <h2> Dies ist ein Testtext, welcher erscheint wenn man &uuml;ber den Link 3 Button f&auml;hrt</h2>
            </Sec3>
            <Sec4>
                <h2> Dies ist ein Testtext, welcher erscheint wenn man &uuml;ber den Link 4 Button f&auml;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

/* 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

 

[threadi]

Wieso erfindest Du HTML-Elemente? Sorge für validen HTML-Code, dann kann man dir auch besser helfen.

 

[Lythis]

den Code hab ich im Großen und ganzen so aus nem Tutorial entnommen und durch die Container (falls man es so nennt) "<haupt> und <Sec1-4>" erweitert.
ich habe mich vor längerer Zeit mal bissle HTML beschäftigt und dort hab ich ziemlich viel immer in Div-Boxen gepackt.
ich bin nun davon ausgegangen, dass man mitlerweile nur noch <"Name"> verwenden kann stadt <Div id="Name">

 

[jappi00]

Nein so etwas kann man nicht^^ Der Browser weiß nicht was das sein soll. Es könnte ja ein <p> gemeint sein...
Es gibt zwar mitlerweile so etwas wie <footer> etc. einfach mal googlen dann findest du dazu was

 

[Nitamud]

Täuscht mich das oder, wäre sowas theoretisch möglich aber invalide?

 

[thecain]

http://www.w3.org/TR/custom-elements/

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Dann gibts auch noch Frameworks die das machen. Wie z.b. angularjs

Zum Thema...

 

[Lythis]

also die abänderung in Div Boxen hat keine Änderung vorgerufen.

wenn ich in CSS selber die Daten Manuell abändere so wie ich es gerne per Mouseover machen würde funktioniert alles wie geplant.
Ich vermute, dass der Fehler irgend wie beim Mouseover hängt, als würde beim Mouseover die Zuweißung zum anderem Div nicht funktionieren.
Die Frage ist also: funktioniert diese Befehlszeile überhaupt wie gedacht?

#main box section .menubutton1:hover > #main article Sec2 { ......

fährt man mit der Maus über den Link mit der Bezeichnung "menubutton1" soll auf Div "Sec2" folgendes ausgeführt werden...?

 

[Tronjer]

Die Frage ist also: funktioniert diese Befehlszeile überhaupt wie gedacht?

Nein, natürlich nicht.

 

[djheke]

Probier mal, ob es dir so reicht.

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hover</title>
<meta charset="UTF-8">
<style>

* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
 box-sizing:border-box;
}

#tab {
 position:relative;
 margin:50px;
 width:500px;
 height:200px;
}

#tab a {
 display:block;
 padding:10px;
 margin:200px 0 0;
 background:#aaa;
}

#tab li {
 float:left;
}

#tab li:hover ul {
 display:block;
 z-index:99;
}

#tab li ul {
 display:none;
}

#tab li ul , #tab div {
 position:absolute;
 left:0;
 top:0px;
 width:500px;
 height:200px;
 overflow:auto;
 background:#aee
}

#tab li ul , #tab div {
 padding:10px;
}
</style>

</head>
<body>


<div id="tab">
 <ul>
  <li><a tabindex="0" href="#a2">text 1</a><ul><li><h2>Lorem 1..</h2></li></ul> </li>
  <li><a tabindex="0" href="#a2">text 2</a><ul><li><h2>Lorem 2..</h2></li></ul> </li>
  <li><a tabindex="0" href="#a2">text 3</a><ul><li><h2>Lorem 3..</h2></li></ul> </li>
 </ul>
<div><h2>Bei Hover neuen Text anzeigen</h2></div>
</div>





</body></html>