?
Solved

Change font color on mouseover

Posted on 2014-04-17
6
Medium Priority
?
227 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 53

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month7 days, 22 hours left to enroll

765 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