kostenloser Webspace werbefrei: lima-city


hover Effekt für Tabelle

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    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!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. pako-webdesign

    pako-webdesign hat kostenlosen Webspace.

    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
  4. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
  5. 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.


  6. Hallo,

    so funktionierts:

    /*---Mouse over ueber die ganze Zeile---*/

    table tr:hover td{
    background-color:#FF0;
    color:green;
    font-weight:bold;
    }

    Gruß
    Ekiam14
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!