Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing onmouseover font color

    You have to mouseover the actual link in order for the link color to change to white. Is there a way to modify this so that you can mouseover any part of the table cell to turn the link color to white?


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<style>
    	
    	a {
    	color: #758EA4;
    	}
    	
    	a.nav {
    		color: #758EA4;
    		text-decoration: none;
    	}
    	
    	a.nav:visited {
    		color: #758EA4;
    		text-decoration: none;
    	}
    	
    	a.nav:hover {
    		color: #FFF;
    		text-decoration: none;
    	}
    	
    	a.nav:active {
    		color: #FFF;
    		text-decoration: none;
    	}
    	
    	body,html {
    		background-color: #FFFFFF;
    		color: #333333;
    	}
    	
    	td {
    		background-color: #FFFFFF;
    		font-family: Arial, Helvetica, sans-serif;
    		font-size: 12px;
    		margin: 0px;
    		padding: 0px;
    	}
    	
    	td.nav_cell {
    		padding: 4px;
    		text-align: right;
    		width: 100%;
    	}
    	
    	</style>
    </head>
    
    <body>
    
    <table style="width: 203px">
    	<tr>
    		<td class="nav_cell" onmouseover="style.backgroundColor='#768EA5'; this.style.color='#FFF'; this.style.cursor='pointer'; window.status = 'Corporate Information Vehicles'; return true;" onmouseout="style.backgroundColor='#FFF'; window.status = ''; return true;" onClick="window.location.href='/'"><a class="nav" href="/">Corporate Information&nbsp;&nbsp;<img align="absmiddle" src="gfx/nav_marker_out.gif" alt="" width="2" height="16" border="0"><img align="absmiddle" src="gfx/nav_marker_over.gif" alt="" width="2" height="16" border="0"></a></td>
    	</tr>
    </table>
    
    </body>
    </html>

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    td:hover

    except in IE, where you need to include a special browser behavior for it to work. for more info on that, go to this thread:
    :hover commands for any element in CSS, in IE

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhhh, I took a look at that thread and couldn't really understand it. Is there any other methodologies I could try?

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Let me try to explaing this to you.

    All browsers support the :hover pseudoclass on any object, except IE. IE only accepts it on the <a> tag. But, this file is a sort of patch for IE that will make the :hover pseudoclass work on all elements. All you have to do is download it, and then link to it by adding this code in you <body> tag:

    Code:
    style="behavior:url(location of file relative to .html file);"
    or in your stylesheet, like this:

    Code:
    body
    {
    style="behavior:url(location of file relative to .html file)";
    }
    Then any item can have a hover applied to it, and it will work in any browser.

    HTH, Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This works with text that isn't within <a></a> tags. If you look at my code, I don't see how your solution will work. What am I missing?

    Ash

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Do you mean that you want only the links to have the color change? And that the whole cell should change color rather than the just the link text?

    If so, add "display: block; width: 100%" to your link CSS. This will expand the width of the link to take up the space within the table cell.


  •  

    Posting Permissions

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