onmouseover effects for body text

Discussion in 'HTML' started by some dude somewhere, Oct 17, 2003.

  1. Hi there,

    I know how to make hyperlinks different with all kinds of text decorations.
    But is there also a way to change the color of your text (plain body text,
    NO hyperlinks)?

    So when your mouse hovers over a textfield (tabel), the font color will
    change?

    Thanks for any advice or help,

    Eric
    some dude somewhere, Oct 17, 2003
    #1
    1. Advertising

  2. some dude somewhere wrote:

    > But is there also a way to change the color of your text (plain body text,
    > NO hyperlinks)?


    The neat way to do this is to use CSS. In your style sheet, put say:

    ..magic:hover {
    background-color: #004;
    color: #FFC;
    }

    and then in your HTML:

    <p>Here is a paragraph with some <span class="magic">magic text</span>.</p>

    However, this doesn't work in Internet Explorer (only in Netscape>6 and
    Opera>7). If you want IE support, do the same as above but then add some
    JavaScript events:

    <p>Here is a paragraph with some <span class="magic"
    onmouseover="this.style.color='#ffc';this.style.backgroundColor='#004';"
    onmouseout="this.style.color='#000';this.style.backgroundColor='#fff';"
    >magic text</span>.</p>


    This should work in Internet Explorer 4+ and Opera 5+ assuming JavaScript
    enabled, and as a bonus will work in Netscape 6+ and Opera 7+ even if
    JavaScript is disabled!

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 17, 2003
    #2
    1. Advertising

  3. YIHAAAA, Toby is tha MAN!!!!!

    Thanks!

    Eric



    "Toby A Inkster" <> schreef in bericht
    news:p...
    > some dude somewhere wrote:
    >
    > > But is there also a way to change the color of your text (plain body

    text,
    > > NO hyperlinks)?

    >
    > The neat way to do this is to use CSS. In your style sheet, put say:
    >
    > .magic:hover {
    > background-color: #004;
    > color: #FFC;
    > }
    >
    > and then in your HTML:
    >
    > <p>Here is a paragraph with some <span class="magic">magic

    text</span>.</p>
    >
    > However, this doesn't work in Internet Explorer (only in Netscape>6 and
    > Opera>7). If you want IE support, do the same as above but then add some
    > JavaScript events:
    >
    > <p>Here is a paragraph with some <span class="magic"
    > onmouseover="this.style.color='#ffc';this.style.backgroundColor='#004';"
    > onmouseout="this.style.color='#000';this.style.backgroundColor='#fff';"
    > >magic text</span>.</p>

    >
    > This should work in Internet Explorer 4+ and Opera 5+ assuming JavaScript
    > enabled, and as a bonus will work in Netscape 6+ and Opera 7+ even if
    > JavaScript is disabled!
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    >
    some dude somewhere, Oct 17, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. CQMMAN
    Replies:
    2
    Views:
    2,031
    CQMMAN
    Nov 29, 2003
  2. London Boy
    Replies:
    2
    Views:
    327
    Keith Bowes
    Jan 12, 2004
  3. Replies:
    5
    Views:
    205
    A. Sinan Unur
    Sep 8, 2005
  4. cwdjrxyz

    Obnoxious DHTML Text Effects

    cwdjrxyz, Jan 17, 2006, in forum: Javascript
    Replies:
    18
    Views:
    236
    Matt Silberstein
    Jan 19, 2006
  5. mstagliamonte
    Replies:
    3
    Views:
    139
    mstagliamonte
    Sep 26, 2013
Loading...

Share This Page