Solved

Change font color on mouseover

Posted on 2014-04-17
6
224 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS z-index issue 3 32
two div layout one vertical other horizontal. 5 28
push logos in footer up higher 5 23
Change Background Color of Website 5 19
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

825 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