CSS - Change Link Background Color

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

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.

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

I am trying to edit a CSS that was set up by someone else - never done this before, using Dreamweaver.

I wanted the links to be a darker blue on baykeeper DOT org, so I changed the code in both homepage.css and subpage.css, the two style sheets for our website. There appears to be only one place to specify link color in each style sheet:

a:link {
color: #004B91;
text-decoration: none;
}
a:visited {
color: #004B91;
text-decoration: none;
}
a:active {
color: #004B91;
text-decoration: none;
}
a:hover {
text-decoration: underline;

If you look at baykeeper DOT org/index.html which is drawing from homepage.css, only the main content has dark blue links. The side column does not. On any other page (drawing from subpage.css) the links are still the same color. I have checked in the .css files and refreshed the pages but clearly I'm missing something...

My questions a
1. Is there some other way to set link color in CSS? I don't see any other places where I could change the color, but maybe I don't know where to look.
2. I had a similar problem with the favicon - I updated the template but it didn't apply to all the pages equally. Why is that? Is there some way to refresh individual pages' connections to the templates? Mysterious to me.
3. Once I figure this stuff out, the bottom nav links will be invisible because the darker blue will blend in - so that's a location where I *want* the link color to be different (white). How do I control the link color in different sections of the layout?

Thanks in advance for any help you can provide.

I have three "buttons" that are essentially <div> elements on a page made to look like a button. I would like to make the background color change for the button on the "hover" state, but for some reason the only part of the background that changes on the hover state is the area only behind the text.

Here's my code. I'd like the whole background area to change, anyone know what I'm doing wrong?

Code:

.prioritycontainer {
width: auto;
float: left;
display: inline;
margin: 0px 0px;
padding: 10px 0px;
}

.prioritybutton {
float: left;
width: 150px;
height: auto;
display: inline;
margin: 0px 20px 0px 0px;
padding: 3px 3px 3px 3px;
background-color: #978047;
border: solid 1px #CCBC77;
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: middle;
}

.prioritybutton a:link {
color: #fff;
text-decoration: none;
}

.prioritybutton a:visited {
color: #fff;
text-decoration: none;
}

.prioritybutton a:hover {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

.prioritybutton a:active {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

Markup on .html page is as follows:

Code:

<div class="prioritycontainer">
<div class="prioritybutton"><a href="one.htm">One</a></div>
<div class="prioritybutton"><a href="two.htm">Two</a></div>
<div class="prioritybutton"><a href="three.htm">Three</a></div>
</div>

Any help would be very helpful.

Thanks,

Brian

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

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?

Hi.

I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover?

I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link.

URL
URL

Thanks for any help anyone can offer

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

the code here works fine, except that the displayed text changes from white to black. It would be nice if each new text would start as FFFFCC and then fade to 3E3D11. Here is the script that I'm manipulating from Java Script Source:

<!-- Paste this code into the CSS section of your HTML document -->

#tic {
/* enter any styles for the ticker below */
border: .05em #CEC3AD solid;
font-size:0.85em;
padding:10px;
width:400px;
line-height:20px;
}
#tic * {
/* this will hide all children tags */
font-size: 1em;
margin:0px;
padding:0px;
display:none;
}
#tic a {
/* add more tags to this list if you wish to display them inside the children */
display:inline;
}




<!-- Paste this code into an external JavaScript file -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Crooke :: http://www.cj-design.com */

var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;

function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=255; //reset hex value
}
}

function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("Could not find a div element with id \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("The div element \"" + divId + "\" does not have any children");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}

function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("The script could not run because you have errors:\n\n" + error);
return false;
}

var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.





<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created -->

<script type="text/javascript" src="yourFileName.js"></script>




<!-- Paste this code into the BODY section of your HTML document -->

<div id="tic">
<h1>Welcome to The JavaScript Source ...</h1>
<p>
The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of the internet.com network.</p>
<p>
All the scripts on this site are free for personal or business use.</p>
<p>
The only requirement is that you leave the credit information inside the script.</p>

<h2>JavaScripts</h2>
<p>
JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it's read.</p>
<p>
JavaScript provides greater flexibility through such luxuries as being able to create windows, display moving text, sound or other multimedia elements with relative ease.</p>

<h2>Some Basics</h2>
<p>
JavaScript is not Java; it is an object-based scripting language; and it is cross-platform.
</p>
</div>

<script type="text/javascript">
<!--
initialiseList("tic");
//-->
</script>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div>