?
Solved

using TR hover in an existing CSS

Posted on 2012-08-30
7
Medium Priority
?
337 Views
Last Modified: 2012-08-31
This is primarily in IE8/9. I have an existing stylesheet which makes alternating rows in a table slightly different background color. I'd like to apply a 'hover' function to the rows to make it easier to tell where you are on the document. Is there a way I can insert a 'hover' command into the CSS block below? All my attempts thus far have failed...including creating another block: .TableItemDetail tr:hover {....}  etc

Thanks
Ron

.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}
0
Comment
Question by:KnowledgeWare
  • 4
  • 3
7 Comments
 
LVL 9

Accepted Solution

by:
WebDevEM earned 510 total points
ID: 38352145
Something like this should work... I've created a JSFiddle at http://jsfiddle.net/webdevem/JfcJp/for you to see it in action if it helps.
<table class="TableItemDetail">
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
</table>

Open in new window

.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}
.TableItemDetail tr:hover {
 background-color: #cc0000;   
 color: #ffffff;
}

Open in new window


I tested in IE8, FireFox (PC), Safari (PC) and Chrome
0
 

Author Comment

by:KnowledgeWare
ID: 38352245
Hello WebDevEM - thanks, I see from jsFiddle that works and accept the solution, however it still won't work on my page. I know I must have something else interfering with it....not sure what.

Ron
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 38352280
If you post a link to your page (or complete code here on EE) I'm sure somebody can look at it... I'll have some time tomorrow, gone for the long weekend and back online Tuesday, but the folks here seem to be available 24x7 by the looks of some of the post times.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Expert Comment

by:WebDevEM
ID: 38352299
It also could be as simple as making sure you have a DOCTYPE set on your page... See http://www.bernzilla.com/item.php?id=762 for a more detailed explanation.

JSFiddles don't seem to have an option for NOT setting a doctype... What you saw on my page was using HTML 5, but I've tried other options and they all seem to work.  You can test those in the "Info" section on the left.

Any time you have something that SHOULD work and doesn't, it's always good to check your doctype.  I've had that come back and haunt me a number of times.
0
 

Author Comment

by:KnowledgeWare
ID: 38352374
Thanks, I never would have thought of that. I've pasted your simple table into the top of the page above the <%@LANGUAGE="VBSCRIPT"%> and it is now working there, but still not below in the main part of the page. I'll keep looking at it. I'd paste the whole thing buts its long, complicated, and ugly...

Ron
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 38352387
No worries... I've also updated the JSfiddle with how to mark some TD cells as extra special so they get different treatment.  Headed home for the day, but I'll be back in the morning.

Ed
0
 

Author Comment

by:KnowledgeWare
ID: 38356060
Hello Ed:

FWIW I've uploaded the page and pasted in the relevent CSS lines below. Your table and 'columns' at line 440 do the rollover OK, however I can't get any of the rows further down the page (starting around Line 680) to do a hover. This is a complicated and old page, I doubt anyone else can get it to display, there is no doubt something overriding the tr:hover tag in the css.

Ron


.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}

.TableItemDetail tr:hover {
 background-color: #cc0000;  
 color: #ffffff;
}

.TableItemDetailAlt
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #F4F3F3;
}

.TableItemDetailAlt tr:hover {
 background-color: #cc0000;  
 color: #ffffff;
}
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month16 days, 7 hours left to enroll

850 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