Results 1 to 4 of 4

Thread: Change Text Color with Mouseover

  1. #1
    Join Date
    Mar 2007
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Change Text Color with Mouseover

    Is it possible to change the text color with a mouseover effect without using images, just the plain text?

    Thank you .... viki barefoot

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    yes you can, however you will need to use a combination of CSS and Javascript. for standards browsers (Basically all BUT Internet Explorer) you can just use the tag, however because IE doesnt support the psuedo selectors for any tag but anchor, you will need to encorporate a javascript hack.

    ANCHOR TAG ( <a href=''>...</a>
    )
    Code:
    <a class="changeBlue" href="/path/to/file.ext">Link</a>
    put this wherever you need the link

    Code:
    a.changeBlue:link { /* default link color */
         color: #000000;
    }
    a.changeBlue:hover { /* change to blue on mouseover */
         color: #0000ff;
    }
    put this in your stylesheet


    NON - ANCHOR TAG
    Code:
    <p class="changeBlue">THIS IS SOME TEXT THAT I WANT CHANGED TO BLUE<p>
    put this in your <body> tag, whereever you want the change to occur.


    Code:
    p.changeBlue {    /* creates the default color as black */
         color: #000000;
    }
    p.changeBlue:hover {  /* changes the color of the text to blue on mouseover */
         color: #0000ff;
    }
    put this in your css stylesheet

    Code:
    <script type="text/javascript">
    document.getElementByClass('changeBlue').onmouseover.style.color = "#0000ff;';
    </script>
    put this in your <head> tag.

  3. #3
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    Yes, it is easy. Make sure the text has a class, for example:


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>

    <style>
    .TheTextOff{
    color:#ff0000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    }

    .TheTextOn{
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    }
    </style>
    </head>

    <body>

    <div class="TheTextOff" onmouseover="this.className='TheTextOn'" onmouseout="this.className='TheTextOff'">Some text you want to change color</div>

    </body>
    </html>

  4. #4
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coolguy View Post
    Yes, it is easy. Make sure the text has a class, for example:


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>

    <style>
    .TheTextOff{
    color:#ff0000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    }

    .TheTextOn{
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    }
    </style>
    </head>

    <body>

    <div class="TheTextOff" onmouseover="this.className='TheTextOn'" onmouseout="this.className='TheTextOff'">Some text you want to change color</div>

    </body>
    </html>


    How this script looks like if you want to add a link to that title wich you want to add the effect? Like an anchor but with change color mouseover effect

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •