Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onmouseover cell color

Posted on 2014-03-04
11
Medium Priority
?
224 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 Admins - 7 Day Trial

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 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

715 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