CSS-Befehl

2becool

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:

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

Liebe Grüße

Jette

Pascal Kremp

Hi 2becool,

dafür brauchst du etwas mehr als CSS. jQuery bietet sich für sowas sehr gut an. Die Lösung zu posten wäre langweilig
Registriere dich hier. Und frag dann, wo du hängen bleibst.

2becool

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

Pascal Kremp

Hi 2becool,

so etwas ähnliches habe ich bereits in einem anderen Forum beantwortet.

Wenn dir dieser Beitrag nicht hilft, schreib mir nochmal.

lukasn

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.

Tags