p3ppy: Farbwechsel es Body bei Mouseover von einem mailto

Moin,

ich wollte auf meiner neuen Website einen kleinen Platzhalter schaffen, der wie folgend aussehen soll:

Ein Link in der Mitte der Site.
Der Link ist schwarz, der Hintergrund weiss
Diese Farben sollen dann bei einem Mouseover von dem Link in sich wechseln, d.h. er Link wird weiss und der Hintergrund schwarz.

Hätte jemand eine Idee, ob ich das per CSS hinbekomme, oder doch mit einem tollen Javascript?

Freue mich auf Hilfe,
p3ppy

  1. Der Link ist schwarz, der Hintergrund weiss
    Diese Farben sollen dann bei einem Mouseover von dem Link in sich wechseln, d.h. er Link wird weiss und der Hintergrund schwarz.

    Mahlzeit,

    Das würde mit jetzt erstmal zu dem Link an sich einfallen als CSS:

    a:hover
    {
      color:#FFFFFF;
    }

    Bei mir liegt solch ein Link in einer Tabelle und diese wird mit javascript ausgestattet. Also die Ereignisse für onMouseOver und onMouseOut erstellt. Leider weiß ich nciht wie man das komplett mit CSS hinbekommt.

    1. Der Link ist schwarz, der Hintergrund weiss
      Diese Farben sollen dann bei einem Mouseover von dem Link in sich wechseln, d.h. er Link wird weiss und der Hintergrund schwarz.

      Mahlzeit,

      Das würde mit jetzt erstmal zu dem Link an sich einfallen als CSS:

      a:hover
      {
        color:#FFFFFF;
      }

      Bei mir liegt solch ein Link in einer Tabelle und diese wird mit javascript ausgestattet. Also die Ereignisse für onMouseOver und onMouseOut erstellt. Leider weiß ich nciht wie man das komplett mit CSS hinbekommt.

      Hmm, ich möchte dass der gesamte Hintergrund die Farbe wechselt. Also so in etwa ein Div mit 100% width und Height. Es soll eben beim Mouseover dann der ganze Hintergrund des Divs (oder was dann auch immer) die Farbe wechseln.

      Ich glaube, da hatte ich mich noch zu knapp ausgedrückt. Aber der Vorschlag oben trifft es wohl noch nicht.

      1. Probiers mal so:

        HTML:
        <table class="gallery" width="100%" height="100%" "onmouseover="this.className='galleryHover'" onmouseout="this.className='gallery'">
          <tr>
            <td>
              <a class="gallerylink" href=".......
            </td>
          </tr>
        </table>

        CSS:
        table.gallery
        {
         background: #F0F0F0;
         border:0px;
         margin: 0;
         padding: 0px;
        }

        table.galleryHover
        {
         background: #E6EDF9;
         border:0px;
         margin: 0;
         padding: 0px;
         cursor: pointer;
        }

        a.gallerylink
        {
          color:#0F2F8C;
        }

        das Resultat siehst du übrigens auf meiner Seite :-)

  2. Hallo p3ppy,

    Ein Link in der Mitte der Site.
    Der Link ist schwarz, der Hintergrund weiss
    Diese Farben sollen dann bei einem Mouseover von dem Link in sich wechseln, d.h. er Link wird weiss und der Hintergrund schwarz.

    Also so. [CSS ist inline]

    Hätte jemand eine Idee, ob ich das per CSS hinbekomme, oder doch mit einem tollen Javascript?

    Wie Du siehst, geht es mit CSS. Beachte jedoch, dass der IE<6 ohne JS bei diesem Beispiel nicht mitspielen möchte.

    Mfg,
    Steffen Bruchmann

    --
    Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}
  3. Moin,

    ich wollte auf meiner neuen Website einen kleinen Platzhalter schaffen, der wie folgend aussehen soll:

    Ein Link in der Mitte der Site.
    Der Link ist schwarz, der Hintergrund weiss
    Diese Farben sollen dann bei einem Mouseover von dem Link in sich wechseln, d.h. er Link wird weiss und der Hintergrund schwarz.

    Hätte jemand eine Idee, ob ich das per CSS hinbekomme, oder doch mit einem tollen Javascript?

    Freue mich auf Hilfe,
    p3ppy

    SUPER!

    Ich danke Euch beiden!

    p3ppy