Solved

Change font color on mouseover

Posted on 2014-04-17
6
225 Views
Last Modified: 2014-04-17
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
Comment
Question by:SimpleDude
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40007738
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40007749
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40007763
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
Independent Software Vendors: 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!

 

Author Closing Comment

by:SimpleDude
ID: 40007785
Thanks Scott, that's awesome!
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40007791
Isn't that what I mentioned?  : \
0
 

Author Comment

by:SimpleDude
ID: 40007805
Sorry Kaufmed, Im new at all these stuff and I used the JavaScript solution instead of the CSS

Thanks.
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question