• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

Change font color on mouseover

Hello!

I've a table that changes the background color when mouseover, and goes back to the original color when mouseout:

 <td width="20%" style="cursor:pointer;cursor:hand" onMouseover="this.bgColor='#2E3740'" onMouseout="this.bgColor='#ffffff'"><div align="center">CHANNELS</div></td>

What I need to do is also to change the Font color at mouseover  (to FFFFFF) and back to #2E3740' when mouseout.

Need some help :)

Thanks!
0
SimpleDude
Asked:
SimpleDude
  • 2
  • 2
  • 2
1 Solution
 
käµfm³d 👽Commented:
0
 
Scott Fell, EE MVEDeveloperCommented:
You would be much better off doing this in a style sheet. But check this out.
Live Sample for code below http://jsbin.com/zofup/1/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<table>
  <tr>
   <td width="20%" style="cursor:pointer;cursor:hand" onMouseover="this.bgColor='#2E3740'; this.style.color='#FFFFFF';" onMouseout="this.bgColor='#ffffff'; this.style.color='#2E3740'"><div align="center">CHANNELS</div></td></tr>
  </table>
</body>
</html>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
This is better
http://jsbin.com/zofup/2/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    td.test{
      background-color:#ffffff;
      color:#2E3740;
      cursor:pointer;
      cursor:hand;
      width:20%;
    }
    td.test:hover{
      background-color:#2E3740;
      color:#FFFFFF;
      
    }
    </style>
</head>
<body>
<table>
  <tr>
   <td class="test"><div align="center">CHANNELS</div></td></tr>
  </table>
</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
SimpleDudeAuthor Commented:
Thanks Scott, that's awesome!
0
 
käµfm³d 👽Commented:
Isn't that what I mentioned?  : \
0
 
SimpleDudeAuthor Commented:
Sorry Kaufmed, Im new at all these stuff and I used the JavaScript solution instead of the CSS

Thanks.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now