onmouseover cell color

I am trying to find out why my cell color will not change?

I put in the following:
<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='lightblue';" onMouseout="this.bgColor='';" style="width: 75px">open</td></a>
Matt PinkstonAsked:
Who is Participating?
 
Julian HansenCommented:
On the second option you have to mouse over the word to click it, I want users to be able to click the box instead which is why we went the other route.
That's why you make your <a> a block element so it fills the cell - that way you get the same effect without having to use bad markup and javascript to do what should be done through CSS
0
 
Dan CraciunIT ConsultantCommented:
quote problems?
<a target="I1" href="inc_opportunities_open_intel.aspx">
<td class="style7" onMouseover="this.bgColor='lightblue'" onMouseout="this.bgColor='white'" style="width: 75px;">open</td>
</a>

Open in new window


HTH,
Dan
0
 
Matt PinkstonAuthor Commented:
No error but no change in colors

<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='lightblue'" onMouseout="this.bgColor='white'" style="width: 75px">open</td></a>
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Dan CraciunIT ConsultantCommented:
I think you need to use hex values. Tested this and it works:
<TR onMouseover="this.bgColor='#99AACC'" onMouseout="this.bgColor='#FFFFFF'">
0
 
Matt PinkstonAuthor Commented:
no change
<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='#99AACC'" onMouseout="this.bgColor='#FFFFFF'" style="width: 75px">open</td></a>
0
 
Julian HansenCommented:
I see  a couple of problems.

Wrapping a <td> in an <a> element is not a good idea. Rather put your <a> inside the <td> make it a block element and the height and width you want and then use CSS :hover to change the cell.
a {
	width: 75px;
}
a:hover {
	background: lightblue;
}

Open in new window

HTML
<table>
  <tr>
    <td>
      <a href="">one</a>
    </td>
    ...
  </tr>
  ...

Open in new window

0
 
Dan CraciunIT ConsultantCommented:
++ on Julian's solution. It's the way it's been done for the past 7 years or so.

But, if you're stuck on archaic systems behind corporate rules, you might need to do it old style.
If you can tell us the browser you're using to test your code, we could be of more assistance.

Dan
0
 
Matt PinkstonAuthor Commented:
Browser is IE11

On the second option you have to mouse over the word to click it, I want users to be able to click the box instead which is why we went the other route.
0
 
GaryCommented:
Your original code works fine. The only way to break it is if the TD is not part of a table...
http://jsfiddle.net/GaryC123/5L5Pw/

Tho everything Julian says still holds true.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
What's the doctype? bgcolor is not supported in HTML5 although I'd be surprised if IE11 didn't support it anyway.
0
 
Matt PinkstonAuthor Commented:
excellent thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.