michaelskw hat geschrieben:Ähnlich, wie Dooyoo seine Kategorien derzeit beschreibt und die Möglichkeit bitet, mit dem "mehr" Link den ganzen Text einzublenden:
https://www.dooyoo.de/fernseher/
Frage:
- Weiß jemand, mit welchem Java Script das so geht?
Für so eine einfache Funktion, d.h. ohne großartige Einblendeffekte, brauchst du kein Javascript, das geht auch mit CSS:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
div.klappe > * {
display:none;
}
div.klappe:hover > * {
display:block;
}
div.klappe > span:first-child {
color:blue;
text-decoration:underline;
display:inline;
}
div.klappe:hover > span:first-child {
display:none;
}
</style>
</head>
<body>
<p>
Mit Blindheit per Definition geschlagen, dennoch nicht unsichtbar, präsentiere ich mich als unbeachtetes und ungeliebtes Stiefkind zeitgenössischer Literatur. Meine Bestimmung liegt - wie ich selbst - in engen Grenzen und ist rein platzhalterischer Natur.
</p>
<div class="klappe"><span>Mehr …</span>
<p>
Kann ein missbrauchtes Wortgefüge eigentlich noch Schlimmeres erleiden, als als Blindtext erdacht und vor der Öffentlichkeit versteckt zu werden?
</p>
</div>
</body></html>
Der aufzuklappende Block wird in ein <div> der Klasse klappe gelegt. Mit
div.klappe:hover > * werden als Erstes sämtliche (*) direkten Kinder (>) dieses <div>s versteckt (display:none). Sobald man mit der Maus über das <div> fährt (:hover), sorgt
div.klappe:hover > * dafür, dass die Kindelemente eingeblendet werden (display:block).
Nun könnten wir über ein normalerweise ausgeblendetes Element ja schwerlich mit der Maus drüberfahren, deshalb gibt es die speziellere Regel
div.klappe > span:first-child. Sie sorgt dafür, dass das erste (:first-child) <span>-Kindelement (>) von div.klappe -hier haben wir unser „Mehr …“ untergebracht- trotz der eingangs aufgestellten Regel
div.klappe > * angezeigt wird (und zwar in Blau und unterstrichen, damit der Benutzer auch weiß, dass er da was machen kann). Die beiden Regeln überschneiden sich, in solchen Fällen überschreibt die spezifischere die allgemeinere.
div.klappe:hover > span:first-child last but not least blendet diesen „Mehr …“-Text aus, sobald man mit der Maus über den Bereich fährt - stattdessen wird dann ja der eigentliche Text angezeigt.
