hover Effekt für Tabelle
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
code
container
echten tabellen
eintrag
farbe
geltenden regeln
genannte beispiel
http
obigen muster
positionieren
preisliste
simpel code
spalte
spalten
umsetzen
ungerade zeilen
unterschiedlicher hintergrundfarbe
versehen code
wort
zeile
-
Liebe Limas,
vielleicht kann mir Jemand helfen wie ich besser danach suchen kann. Ich würde gerne diese Art der Preistabelle nutzen: http://www.theprintspace.de/preisliste.php dort gibt es einen Mousovereffekt der aktiviert wird und Zeile und Spalte in eine Verbindung bringt. Habt ihr eine Idee, wie ich das umsetzen kann? Gearbeitet wird dann mit einer Wordpressseite, Plugin würde ich natürlich auch nehmen, im Moment weiß ich nur nicht nach welchem Stichwort ich suchen soll. Herzlichen Dank für eure Mühe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das ist eigentlich garnicht so schwierig. Ich erklärs einmal mit Worten und einmal mit Code. Wenn du noch Fragen hast kannst du sie eh noch unten hinschreiben. Also, wir haben bei dieser Preisliste drei Elemente: Die Spalten, die Zeilen und die Einträge. Und für alle drei muss man eine Hover Effekt erstellen. Also, Der Grundbaustein sind Zeile und Spalte, diese erstellst du mit sei Div-Containern. Dann definierst du in CSS das wenn die Maus über eine Zeile oder Spalte fährt, sich z.B. der Hintergrund ändern soll. Das machst du dann bei allen Zeilen und Spalten die du einfügst. Wenn du also 3 Zeilen und 7 Spalten hast, musst du entweder 10 Einträge machen, wenn du allen Containern verschiedene ID's zuteilst, oder nur einen, wenn du allen Containern nur eine ID gibts. Dann haben aber auch alle Hintergründe die gleiche Farbe. Dann erstellst du innerhalb der Div-Container die Zeilen und Spalten enthalten, deine Einträge, ebenfalls mit Div-Containern. Auch für diese erstellst du einen CSS Eintrag für ein Mouseover.
Jetzt der Code, ich habe allen Divs die Namen Zeile, Spalte und Eintrag gegeben:
HTML:
<head> <link rel="stylesheet" href="design.css"> </head> <body> <div id="preisliste"> <div id="Spalte"> <div id="Zeile"> <div id="Eintrag">1,00</div><div id="Eintrag">2,00</div> </div> </div> </div> </body>
CSS:
#Spalte:hover { Background:lightblue; } #Zeile:hover { Background:lightblue; } #Eintrag:hover { Background:lightred; }
Ich habe mal positionieren außen vor gelassen, wenn du dabei Hilfe brauchst, sag einfach. Wenn du's dann verstehst kannst du es selbst verändern und so anpassen wie du möchtest, also Farben, Bilder, Borders etc.
Lg
Paul -
Lösungen, die ganz genau so aussehen, wie das von dir genannte Beispiel habe ich nicht, aber die folgenden Lösung sind zumindest ähnlich.
1. Variante Google Interactive Charts. Damit kann man auch Tabellen Designen, Beispiel siehe hier
https://google-developers.appspot.com/chart/interactive/docs/gallery/table
2. das jQuery Plugin tablehover von dieser Seite
http://p.sohei.org/jquery-plugins/tablehover/
Dort gibt es auch einen Link zu den Demos -
Wenn mit "echten Tabellen gearbeitet wird, ist die CSS-Lösung simpel:
tr:hover{background-color: #ecc;}
Wenn zusätzlich noch ein Tabellierpapiereffekt gewünscht ist, lassen sich gerade und ungerade Zeilen auch einfach mit unterschiedlicher Hintergrundfarbe versehen:
tr:nth-child(even) {background: #fff;} tr:nth-child(odd) {background: #ccc;}
Bei der Variante von pako-webdesign, werden, entgegen der geltenden Regeln, IDs mehrfach verwendet. Aber auch eine aus Divs konstruierte Pseudotabelle läßt sich nach dem obigen Muster formatieren.
-
Hallo,
so funktionierts:
/*---Mouse over ueber die ganze Zeile---*/
table tr:hover td{
background-color:#FF0;
color:green;
font-weight:bold;
}
Gruß
Ekiam14 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
