www.webdeveloper.com
Results 1 to 15 of 15

Thread: Change font color on mouse over

  1. #1
    Join Date
    Feb 2004
    Posts
    104

    Change font color on mouse over

    Hey everyone --

    In my page I have the cell backgorund color change when the cell is moused over. I would also like the font color to change to white (#FFFFFF) when the cell is moused over as well, but I don't know how. I know how to make the text change when the text is hovered, but I want the text to change when the entire cell is hovered, if possible. Here is the code for a sample cell:

    PHP Code:

        
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4">
          <
    tr>
            <
    td onMouseOver="this.style.backgroundColor='#2172A1'; this.style.cursor='hand';" onMouseOut=this.style.backgroundColor="#95BED4" width="20%">
            <
    p align="center"><b><font face="Verdana" color="#2172A1" size="2">Home</font></b></td>
          </
    tr>
        </
    table
    Thanks for all your help!
    Last edited by jeffy777; 08-22-2005 at 12:16 PM.

  2. #2
    Join Date
    Jun 2005
    Location
    Israel
    Posts
    53
    <P> tag - onMouseOver Color change to white:

    Code:
    <html>
    <!-- Created on: 22/08/2005 -->
    <head>
      <title></title>
    </head>
    <body>
     <table onmouseover="document.style.x.color='white'"  border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4"> 
          <tr> 
            <td onMouseOver="this.style.backgroundColor='#2172A1';  this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#95BED4'" width="20%"> 
             <!-- <P> tag onMouseOver Color -->
    		<p align="center"><b><font face="Verdana" color="#2172A1" onmouseover="this.style.color='white'" onmouseout="this.style.color='#2172A1'" size="2">Home</font></b></td> 
          </tr> 
        </table> 
    </body>
    </html>
    Regards!
    Alon C
    .

    ___________________________________________
    If a packet hits a pocket on a socket on a port,
    and the bus is interrupted at a very last resort,
    and the access of the memory makes your floppy disk abort,
    then the socket packet pocket has an error to report
    .

  3. #3
    Join Date
    Feb 2004
    Posts
    104
    That code doesn't make the font color change when the cell is mouse over, and it gives an error as well.

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    See http://www.w3.org/TR/CSS2/selector.h...pseudo-classes . And stop using TABLEs for layout.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Feb 2004
    Posts
    104
    I don't think your link fixes my problem, and what's wrong with TABLEs? This site uses them....

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    The link does indeed fix your problem.

    The HTML 4.01 Specification has this to say about tables:
    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Jul 2005
    Location
    Michigan
    Posts
    43

    this works

    the problem was that you were using HTML font tag to set the font color but using CSS/DOM to change the "color" property of the cell, which wouldn't work. Instead, remove the font tag's color property and move the color into the style property of the table cell. Then modify that property dynamically on mouseover and mouseout.

    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4">
    <tr>
    <td style="color:#2172A1" onMouseOver="this.style.color='white';this.style.backgroundColor='#2172A1'; this.style.cursor='hand';" onMouseOut="this.style.color='#2172A1';this.style.backgroundColor='#95BED4';" width="20%">
    <p align="center"><b><font face="Verdana" size="2">Home</font></b></td>
    </tr>
    </table>

  8. #8
    Join Date
    Jul 2005
    Location
    Michigan
    Posts
    43
    So. . . . how do you do that inline code thing where the code is inside a nifty little box?

  9. #9
    Quote Originally Posted by jeffy777
    Hey everyone --

    In my page I have the cell backgorund color change when the cell is moused over. I would also like the font color to change to white (#FFFFFF) when the cell is moused over as well, but I don't know how. I know how to make the text change when the text is hovered, but I want the text to change when the entire cell is hovered, if possible. Here is the code for a sample cell:

    PHP Code:

        
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4">
          <
    tr>
            <
    td onMouseOver="this.style.backgroundColor='#2172A1'; this.style.cursor='hand';" onMouseOut=this.style.backgroundColor="#95BED4" width="20%">
            <
    p align="center"><b><font face="Verdana" color="#2172A1" size="2">Home</font></b></td>
          </
    tr>
        </
    table
    Thanks for all your help!

    Jeffy, I have a simple test page that may help or not, but I post it here for your use.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
        <
    title>Table Row Rollover Demo</title>
        <
    style type="text/css">
            
    tablewidth98%; border1px solid blue; }
            
    tdborder1px solid #DDD; }
            
    .whi background#FFF; cursor: default }
            
    .red background#F00; cursor: hand; }
        
    </style>
        <
    script>
            function 
    f(o,b){ o.className = (b) ? 'red' 'whi';    } // event handler
            
    function init(){//dynamic event handler assignment        
                
    var obj null;
                for(
    i=0;i<3;i++){ // 0..maxTableRows
                    
    obj document.getElementById("r"+i);     // find the IDs of the table... 
                    
    obj.onmouseover    = function(){f(this,1);}  // assign a onmouseover event handler to each row
                    
    obj.onmouseout    = function(){f(this,0);}  // assign a onmouseout event handler to each row
                
    }
            }
        
    </script>
    </head>

    <body onLoad="init();">

        <div align="center"><h2>All three tables do the same thing, only in slightly different ways.</h2></div>

        <!-- While this table seems simple, it is hardest to maintain as color class is imbedded in the table, as is the event handler assignment -->
        <table align="center">
            <caption>This table uses a <strong>statically</strong> assigned event handler to assign the css class</caption>
            <tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br>
        <br>

        <!-- This table is slightly easier to maintain, as no color class is imbedded in the table, but the event handler assignment is imbedded -->    
        <table align="center">
            <caption>This table uses a <strong>statically</strong> assigned javascript event handler function to assign the css class</caption>
            <tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br>
        <br>
        <br>

        <!-- This table is the easiest to maintain as no color class is imbedded, and the event handlers can be changed externally. -->    
        <table align="center">
            <caption>This table uses a <strong>dynamically</strong> assigned javascript event handler function to assign the css class</caption>
            <tr id="r0">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr id="r1">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr id="r2">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br>
        <br>
        <br>

    </body>
    </html> 
    While it does not specifically address your problem, it does address onmouseover, and onmouseout events.

    "It's a small world, but I still wouldn't want to paint it."
    ---Steven Wright

    Jay on SurvivalRing
    Blog On!

  10. #10
    Join Date
    Feb 2004
    Posts
    104
    thanks -asx-: your code works exactly how I wanted it to in order to paste codes inline, you need to use the forum tags. it's like html tags except you use squre brackets. so put your code between <php>your code here</php> except chage the brackets to square ones.

    griff777: That's really cool!
    Last edited by jeffy777; 08-24-2005 at 02:11 PM.

  11. #11
    Join Date
    Jul 2005
    Location
    Michigan
    Posts
    43

    ~

    OK, let me try that. Here's an improved version of that script that will allow the entire cell to be a hyperlink instead of just the word "Home". This way you don't have the problem where the whole cell responds to mouseover, but only the actual text is clickable, which would annoy users. This also uses window.status onmouseover and onmouseout to simulate an actual HTML link:

    PHP Code:
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4"
    <
    tr
    <
    td style="color:#2172A1" onclick="location.href='http://www.cnn.com/'" onMouseOver="window.status='http://www.cnn.com/';this.style.color='white';this.style.backgroundColor='#2172A1'; this.style.cursor='hand';" onMouseOut="window.status='';this.style.color='#2172A1';this.style.backgroundColor='#95BED4';" width="20%"
    <
    p align="center"><b><font face="Verdana" size="2">Home</font></b></td
    </
    tr
    </
    table
    Thanks for the tip about the <php>!
    Last edited by -asx-; 08-24-2005 at 09:36 PM.

  12. #12
    Join Date
    Feb 2004
    Posts
    104
    Thanks!

    And is it possible to change the font color in a different cell when you mouse over a another cell?

    for instance, here is some code:
    PHP Code:
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <
    tr>
        <
    td width="100%">
        <
    p align="center">hover here</td>
      </
    tr>
    </
    table>
    <
    br>
    <
    table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <
    tr>
        <
    td width="100%">
        <
    p align="center">this text changes</td>
      </
    tr>
    </
    table
    Is it possible to change the text color in the bottom table cell when the top table cell is hovered?

    Thanks again

  13. #13
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    
    <style type="text/css">
    .highlight {background-color:#ff0; text-align:center; width:5em}
    .normal {border:solid 1px #ff0; text-align:center; width:5em}
    </style>
    
    </head>
    <body>
    <div class="normal" id="foo" onmouseout="document.getElementById ('bar').className = 'normal'" onmouseover="document.getElementById ('bar').className = 'highlight'">Foo</div>
    <div class="normal" id="bar" onmouseout="document.getElementById ('foo').className = 'normal'" onmouseover="document.getElementById ('foo').className = 'highlight'">Bar</div>
    </body>
    </html>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  14. #14
    Join Date
    Feb 2004
    Posts
    104
    Thanks Charles -- that certainly pointed me in the right direction

  15. #15
    Join Date
    Apr 2012
    Posts
    1

    Smile Change font color on mouse over on CSS

    its simple. just use

    body <ur menu text>:hover
    {
    color:<your color>
    }

Thread Information

Users Browsing this Thread

There are currently 5 users browsing this thread. (0 members and 5 guests)

Posting Permissions

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



Recent Articles