Say I have these 2 styles...
td.mainmenu {
font-size: 7pt;
font-family: arial, sans-serif;
background: #ffffff;
color: #0000ff;
text-decoration: none;
}
td.mainmenu2 {
font-size: 7pt;
font-family: arial, sans-serif;
background: #6699cc;
color: #ffffff;
text-decoration: none;
}
And then the following code:
print("<tr><td class='mainmenu'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/index.php?content=mainmenu'>
Main Menu</a></td></tr>");
What I am trying to do is switch between the styles .. Would this be done with onmouseover and onmouseout? I know by incorporating those into the <TD> declaration I can change one atribute.. but no matter what I do, I cant figure out how to change the styles.... HELP!
ex:
<td onmouseover="this.style.background='green';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn green</td>
So, hows it done???
Feel free to strip the print(" off of it.. my entire site is database driven using php, and I was just too lazy to strip it myself...
And before anyone yells, The search isnt returning anything, although im sure this has been answered before... But Im not finding it....
Styles used:
td.mainmenu {
font-size: 7pt;
font-family: arial, sans-serif;
background: #ffffff;
}
td.mainmenu2 {
font-size: 7pt;
font-family: arial, sans-serif;
background: #0099ff;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
A:hover.mainmenu {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {
color: #6699cc;
font-weight: normal;
text-decoration: none;
}
Using those styles,
<table>
<tr>
<td class='mainmenu' onmouseover="this.className='mainmenu2';"
onmouseout="this.className='mainmenu';">
<a class='mainmenu' href='http://www.webdeveloper.com/forum/archive/index.php/index.php?content=mainmenu'>
TESTING
</a>
</td></tr></table>
ok now that successfully changes the background of the cells.
the problem is, once a link is clicked, it goes to the visted color, 6699cc. This is fine.. But when I move the mouse into that cell again, the link is still that color. I need it to switch back to the bold, white...
Any ideas? Its probably so simple too.... UGH!!!
*Both posts edited for readabilityChange the order of hover and link.
Instead of
A:hover.mainmenu {...}
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}
use the following
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}
A:hover.mainmenu {...}if its that simple, im going to scream....*** EXTREMELY LOUD EAR PIERCING SCREAM ***
And I've been beating my head against the desk all night trying to figure this out....DUDE YOU RAWK!!!!!
td.mainmenu {
font-size: 7pt;
font-family: arial, sans-serif;
background: #ffffff;
color: #0000ff;
text-decoration: none;
}
td.mainmenu2 {
font-size: 7pt;
font-family: arial, sans-serif;
background: #6699cc;
color: #ffffff;
text-decoration: none;
}
And then the following code:
print("<tr><td class='mainmenu'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/index.php?content=mainmenu'>
Main Menu</a></td></tr>");
What I am trying to do is switch between the styles .. Would this be done with onmouseover and onmouseout? I know by incorporating those into the <TD> declaration I can change one atribute.. but no matter what I do, I cant figure out how to change the styles.... HELP!
ex:
<td onmouseover="this.style.background='green';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn green</td>
So, hows it done???
Feel free to strip the print(" off of it.. my entire site is database driven using php, and I was just too lazy to strip it myself...
And before anyone yells, The search isnt returning anything, although im sure this has been answered before... But Im not finding it....
Styles used: td.mainmenu {
font-size: 7pt;
font-family: arial, sans-serif;
background: #ffffff;
}
td.mainmenu2 {
font-size: 7pt;
font-family: arial, sans-serif;
background: #0099ff;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
A:hover.mainmenu {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {
color: #6699cc;
font-weight: normal;
text-decoration: none;
}
Using those styles,
<table>
<tr>
<td class='mainmenu' onmouseover="this.className='mainmenu2';"
onmouseout="this.className='mainmenu';">
<a class='mainmenu' href='http://www.webdeveloper.com/forum/archive/index.php/index.php?content=mainmenu'>
TESTING
</a>
</td></tr></table>
ok now that successfully changes the background of the cells.
the problem is, once a link is clicked, it goes to the visted color, 6699cc. This is fine.. But when I move the mouse into that cell again, the link is still that color. I need it to switch back to the bold, white...
Any ideas? Its probably so simple too.... UGH!!!
*Both posts edited for readabilityChange the order of hover and link.
Instead of
A:hover.mainmenu {...}
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}
use the following
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}
A:hover.mainmenu {...}if its that simple, im going to scream....*** EXTREMELY LOUD EAR PIERCING SCREAM ***
And I've been beating my head against the desk all night trying to figure this out....DUDE YOU RAWK!!!!!