?
Solved

Override hover in a css class

Posted on 2009-04-29
6
Medium Priority
?
953 Views
Last Modified: 2012-05-06
How can I override a tr hover?
The code below is not working.

Many thanks for any clues.
.hilite {background: #FFFF99;
		 hover: background-color: #FFFF99;
		 color: #000000;}

Open in new window

0
Comment
Question by:mjacobs2929
  • 3
  • 3
6 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 24258939
:hover is a selector, not a property. You need to use a second rule:
.hilite {
  background: #FFFF99;
  color: #000000;
}
.hilite:hover {
  background-color: #FFFF99;
}
 
// or you could use the comma to make one rule apply to both:
 
.hilite,
.hilite:hover {
  background: #FFFF99;
  color: #000000;
}

Open in new window

0
 

Author Comment

by:mjacobs2929
ID: 24259044
Hmm. That's had no effect. Maybe I need to do an inline style?
0
 
LVL 43

Expert Comment

by:David S.
ID: 24264396
You could, but that's rather messy.  Perhaps the other rule has higher specificity. Please show us more of your code.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:mjacobs2929
ID: 24267759
Yes, must be #page_content.

Below is the entire block I'm using to override the included style sheet. The only part not working, as you know, is the .hilite:hover.  #page_content seems to be taking rpresedence every time.

Many thanks,
M
	<style type="text/css">
	  <!--
		#page_content tbody tr:hover{background: none;} 
        .custom {border-top: 0px;  
				 border-bottom: 0px; 
				 border-right: 0px;
				 border-left: 0px;}
		.hilite,
		.hilite:hover {background: #FFFF99;
				 color: #000000;}
		input.bttn {width: 145px;	
				 text-align: center;}
	  -->
	</style>

Open in new window

0
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 24268003
Yeah, IDs have higher specificity.  Try this:
                .hilite,
                #page_content tr.hilite:hover {background: #FFFF99;
                                 color: #000000;}

Open in new window

0
 

Author Closing Comment

by:mjacobs2929
ID: 31575865
Works, brilliant, thank you!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month17 days, 2 hours left to enroll

864 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