Solved

Change font color on mouseover

Posted on 2014-04-17
6
220 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I make a css class read only with jquery? 2 37
Add animation to your css 12 32
Autoprefixer and text editors 1 25
Remove lines by logo 2 22
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

911 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now