Tabelle mit Hover Effekt und Bild

  • Hallo

    ich versuch schon einige Zeit eine Tabelle zu erstellen, dies ist auch kein Problem, auch mit dem Hovereffekt ist kein Thema. jedoch möchte ich gern Die tabelle noch etwas auffrischen.

    Hier mein Code für die Tabelle

    <html>
    <style type="text/css">
    <!--
    .hin {
    background-color:gainsboro;
    color:red;
    }
    .zurueck {
    background-color:transparent;
    }
    -->
    </style>
    </head>

    <body>
    <table border="1" width="500">
    <tr>
    <td onMouseOver="this.className='hin';" onMouseOut="this.className='zurueck';">Zelle 1</td>
    <td>Zelle 2</td>
    </tr>
    </table>
    </body>
    </html>

    nun soll die Tabelle jedoch etwas aufgefrischt werden mit so einen Zusatz, so das die Tabelle von links nach recht die Farbe ändert.
    background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC))

    wenn ich diesen Code einsetze, gar kein Problem, jedoch wenn ich dann in das Visuelle bearbeitung gehe und will den Text ändern und noch ein Bild einfügen möchte, verschwindet der Code, und meine Tabelle sieht wieder weis aus.
    hat jemand eine idee bzw nen ganz anderen vorschlag,
    Vielen Dank

    Kai

    http://tsvcossebaude-freizeitmannschaft.com/

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • als erstes ändere mal den html code in:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!