CSS-Befehl

    Hallo,

    ich versuche derzeit in einer html-basierten Seite Texte bei Mouseover erscheinen zu lassen. Detailliert geht es darum, Themen für Projekte immer sichtbar sein zu lassen und bei Interesse (mouseover) die detaillierten Erklärungen "aufklappen" zu lassen. Leider kenn ich den CSS-Befehl dazu nicht. Bisher weiß ich nur, dass ich an den Anfang der html-Datei das hier schreiben muss:

    <html>
    <head>
    <style type="text/css">
    p {

    }
    </style>

    Was muss jedoch in die { } rein? Ich danke euch vielmals für die Hilfe.

    Liebe Grüße

    Jette

    Hi Pascal,

    vielen Dank für deine schnelle Antwort.
    Wäre das dann der slideDown und slideUp Befehl, den ich verwenden muss? Oder der Show and Hide-Befehl?


    $(document).ready(function() { $("#hideButton").click(function() { $("#div1").slideUp("slow", function() {});}); $("#div6").slideUp(200);});});}); $("#showButton").click(function() { $("#div1").slideDown("slow"); $("#div6").slideDown(200);}); });oder dieser

    <html>
    <head>
    <title>jQuery 04 - Show und Hide</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery_04-1_show_hide.js" type="text/javascript"></script>
    <style type="text/css">
    div { width: 100px; height: 100px; background-color: yellow; border: 1px solid #000; }
    </style>
    </head>
    <body>
    <input id="hideButton" type="button" value="hide" />
    <input id="showButton" type="button" value="show" />
    <div id="div1" style="position: absolute; left: 10px; top: 60px">speed: "slow"</div>
    <div id="div6" style="position: absolute; left: 310px; top: 210px">speed: 200</div>
    </body>
    </html>


    Funktioniert das dann in einer html-Datei? Oder muss ich diese extern hochladen?

    Liebe Grüße

    Das lässt sich allerdings auch problemlos mit reinem HTML/CSS bewältigen, genauer mit der Pseudoklasse :hover von CSS. Nach deiner Beschreibung wäre eine Definitionsliste wohl am sinnvollsten. Folgender Code sollte dir auf die Sprünge helfen:

    HTML
    <dl>
    <dt>Thema 1</dt>
    <dd>Beschreibung Thema 1</dd>
    <dt>Thema 2</dt>
    <dd>Beschreibung Thema 2</dd>
    <!-- ... -->
    <dt>Thema n</dt>
    <dd>Beschreibung Thema n</dd>
</dt>

    CSS:

    Code
    dd {    display: none; }


dt:hover+dd {    display: block }

    Der +element Selektor wählt immer nur das Element aus, das direkt auf das Element vor dem + folgt. Eine andere Möglichkeit wäre z.B. die Beschreibung als unterelement des Titels zu verwenden, die hier verwendete <dl> ist aber wohl die Sinnvollere Lösung, wobei gewissere ältere browser den +-Selektor nicht unterstützen.