CSS - Change Current Css Background

Trying to get my td backgrounds and my links to change colors when you roll over into the td. However only both change when you roll over the link within the td.

If you roll over just the td, it changes, but I need both the link color and the bg color to change when you roll over the td.

Here's what I'm going for, the category set up I mean:
http://www.colemancampingstore.com/link-hiking.html

Here's my CSS etc.
PHP Code:
 td:hover.cats {
background-color: #446644;
color:white;
}
a:link.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
}
a:visited.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
     color: #000;
}
a:hover.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

a:active.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
}


echo "<td class='cats' ><center>";
echo "<b><a href='links.php?cat=".$myrow['cat']."' class='catlink'>".$myrow['cat']." </a></b><br>";
echo "</center></td>";
} 





Is there a way to achieve this effect without using javascript and junk?

I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css.

Tell me what to post here and I will.

Thanks

BTW I have very basic knowledge of CSS

Hi all,

I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/

I have a horizontal navigation towards the top. Here are my queries:

I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change.

OR

Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS?

Please help!!!

Thanks!

Janusz

Guys,

Im new to UI design, pls help...

This is a part of my code -

Code:

<div class="yellow"><a href="#">test link 1</a></div>
<div class="yellow"><a href="#">test link 2</a></div>
<div class="yellow"><a href="#">test link 3</a></div>

Now when i click on a link, the css class "Yellow" should be changed to class "Red" - (the div has yellow css class by default, when a link is clicked the css class for the div should be changed). And when the link on the second div is clicked, the first div should go to its default class (yellow) and second div (the one clicked) should change its class from yellow to red.

Please Help.

Thanks.

Hi,
I have 5 input textbox in my page.
I want to change the background color of one input textbox to red.
How to change the color of the input box to red?

Thank you

Thanks for taking the time to read my question.

I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working.

Any ideas?

Thanks,

Brad

I have these two areas.

Code:

.MenuItem {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:0px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

.MenuItemTop {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:2px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

which refer to the left nav.

My code only changes the color behind the text, not the entire area (box) behind the text.

Code:

.MenuItemTop a:hover, .MenuItem a:hover {
	color:#FFFFFF;
	text-decoration:underline;
	font-size:12px;
	background-color:#000000;
}

Any ideas why?

example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm

Brad

i have been using the website tonight program on godaddy.COM i would like to change the background to a personal picture i have. when i called they told me they had no idea how to do it but it might have something to do with the css and to view the advanced css option here is what i found :

Code:

/*----------------------------------
		Theme411_Clean_Slate
		Cat Generic
----------------------------------*/

body {	
	font-family: "Times New Roman", Times, FreeSerif, serif;
}

.sf_outer_wrapper {	
}

.sf_extra1 {
}

.sf_wrapper {	
}

/*--------------------------------
		Top Navigation
---------------------------------*/

.sf_navigation_top {
	display: none;
}

.sf_navigation_top ul{
	
}

.sf_navigation_top ul:after{
	
}

.sf_navigation_top ul li {
	
}

.sf_navigation_top ul li.sf_last_nav_item{
	
}

.sf_navigation_top ul li.sf_first_nav_item{

}

.sf_navigation_top ul li a {
}

.sf_navigation_top ul li a:visited {	
	
}

.sf_navigation_top ul li a:hover {
	
}

/*--------------------------------
		End Top Navigation
---------------------------------*/


.sf_extra10 {
}


/*--------------------------------
		Header
---------------------------------*/

.sf_header_wrapper {	
}

.sf_extra2 {
}

.sf_main_header {	
}

.sf_extra3 {
}

.sf_sub_header {	
}

/*--------------------------
		End Header
--------------------------*/


.sf_extra4 {
}


/*--------------------------------
		Bottom Navigation
---------------------------------*/

/**
 * @section navigation
 */
.sf_navigation {
    padding:0;
	margin: 0;	
}

.sf_navigation ul {	
    height: auto !important;
    height: 9%;
	list-style-type:disc; 
	margin:0;
    padding:0 0 0 30px;
	width: 900px;
}

.sf_navigation ul li {	
	margin:5;
    padding:0;
	width:200px;	
}

.sf_navigation ul li a {
	display:block;
    margin: 0;	
    padding:0; 
    text-decoration: none;
	width:175px;
}

.sf_navigation ul li a:hover {
	text-decoration:underline;
}

/**
 * @section subnav
 */
.sf_navigation ul.subnav {
	background:#ffffff;
	left: -999em;	
	list-style-type:none; 
	margin:-1.12em 0 0 160px;
    padding:0;
	position: absolute;
	float: left;
	width: 170px;
	z-index:1000;
}

.sf_navigation ul.subnav li {
	float: left;
	width: 170px;
	margin:0;
    padding:3;
}

.sf_navigation ul.subnav li a {
	width: 170px;
	display: block;
	padding:2px 0; 
    margin: 2;
	background-image:none;
}

.sf_navigation ul.subnav li a {
	text-decoration:none;
}

.sf_navigation ul.subnav li a:hover {
	background:#f1f1f1;
	text-decoration:underline;
}

#Nav1 li:hover ul, 
#Nav1 li.sfhover ul {
	left: auto;
}

#Nav1 iframe {
	position: absolute;
	left: 4;
	top: 3;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
} 

/*--------------------------------
		End Bottom Navigation
---------------------------------*/


.sf_extra5 {
	clear:none !important;
	clear:left;
}


/*--------------------------------
		 	Page Title
---------------------------------*/

.sf_pagetitle {
	color: 000000 ;
}

/*--------------------------------
		 End Page Title
---------------------------------*/


.sf_extra6 {

}

.sf_extra11 {

}
	
/*--------------------------
		Content
--------------------------*/

.sf_content {	
	
}

.sf_content img {
	
}

/*--------------------------
		End Content
--------------------------*/


.sf_extra12 {
	
}

.sf_extra7 {

}

/*--------------------------
		 Footer
--------------------------*/

.sf_footer {
	
	clear: both;
}

/*--------------------------
		End Footer
--------------------------*/


.sf_extra8 {
	
}

.sf_extra9 {
	
}


/*--------------------------
		Extra Stuff
--------------------------*/


a:link {	
}

a:visited {	
}

a:hover {	
}

.sf_banner {
	margin: 40px auto 0 auto;
	text-align: center;
}

.sf_banner a{	
}


/**
 * Sticking flyout menu bug
 *
 * @bugfix
 * @affected ie7
 * @css-for ie7
 * @valid yes
 */
#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
} 

PLEASE HELP ME WHAT DO I DO TO CHANGE MY BACKGROUND TO A PERSONAL PICTURE I HAVE

Hi All

I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me.

Thanks

Using transparent gif text. It is linked

On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript?


How do I do this? I've figured out the opaque text on 50% opaque white background.

hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is:

http://rollinlow54.com/galleries/

now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he

http://rollinlow54.com/fixme.php

Here is the CSS for the code in the first page:

Code:

#links a 
{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 4px;
padding: 3px;
text-decoration: none;
width: 170px;
float: left;
background-color: #3A628A;
color: white;
font-family: arial, verdana, sans serif;
font-size: 11px;
}

#links a:hover
{
text-decoration: none;
background: #0A2F54;
}

that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML:

Code:

<div id="links">
    <a href="http://rollinlow54.com/">galleries (18)</a>
    <a href="http://rollinlow54.com/">site statistics</a>
    <a href="http://rollinlow54.com/">download my resume (pdf)</a>
    <a href="http://rollinlow54.com/">contact information</a>
    <a href="http://rollinlow54.com/">visit company site</a>
</div>

there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this??

I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div.

It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow.

As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special.

Code:

#sect1 ul.stories a:hover{
		background-color:#d9f7ff;
		color: #71808F;
	}

Thanks!
cae

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

Can anyone tell me how to change the background colour of all tooltip texts on a web page?

Cheers.