Solved

onmouseover cell color

Posted on 2014-03-04
11
221 Views
Last Modified: 2014-03-17
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>
0
Comment
Question by:Matt Pinkston
[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
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 39903149
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
 

Author Comment

by:Matt Pinkston
ID: 39903183
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
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 39903195
I think you need to use hex values. Tested this and it works:
<TR onMouseover="this.bgColor='#99AACC'" onMouseout="this.bgColor='#FFFFFF'">
0
Office 365 Training for IT Pros

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

 

Author Comment

by:Matt Pinkston
ID: 39903205
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39903207
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
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 39903222
++ 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
 

Author Comment

by:Matt Pinkston
ID: 39903251
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
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39903295
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
 
LVL 58

Expert Comment

by:Gary
ID: 39903747
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39904568
What's the doctype? bgcolor is not supported in HTML5 although I'd be surprised if IE11 didn't support it anyway.
0
 

Author Closing Comment

by:Matt Pinkston
ID: 39933962
excellent thanks
0

Featured Post

Office 365 Training for IT Pros

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
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 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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

738 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