CSS - Change Opacity Of Background On Mouseover?

I'm just learning CSS, trying to create a simple 3 column layout using floats. I have a background image and would like each column to have a background transparency. I'm able to sort of do this using something like the following:

//background: white;
//opacity:0.2;filter:alpha(opacity=20);


the problem I have is that it changes the transparency of the content I put into the float, not just the background. I tried creating a span and specifying the opacity of that but it only works relative to the transparency of the float. It still doesn't create non-transparency within the float.

Hi,

Ive coded a page so that there is a coloured div with 30% opacity and then added another div inside it for text but the text also has the 30% opacity... how do i get it to display the text correctly?

Here is my example

Thanks for any help,
Mike

What I'm after happening is for the background to have opacity but not the text.

I can make the background have opacity but I don't know how to stop the text being changed by it.

Here's the code that I'm using for this bit.
CSS
Code:

a:link{ font-size: 11pt; font-family: Verdana; text-decoration: none; color:#000000}
.back{background-color: #cd5b00; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: .5;}

html
Code:

							<tr>
								<td width="100%" class="back">
								<ul>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
								</ul>
								</td>
							</tr>

The html code is on a div with a background image.

In the above code the background of the table has opacity but so does the text, is there anyway to stop the text having opacity as well?

Hope that makes sense, thanks for reading, if it's not clear let me know.

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

Hi,

I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change:

Code:

/* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }

I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row.
Code:

<td class="row4" onmouseover='window.status="{$info['name']}"; 
this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; 
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>

Thanks,

Prism128

PS: The iOver and iOut (in the second code) are colour references in a php file

I know how to make the background of a link change but how do you do it if it isnt a link? 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!

Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area?

Thank you

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.

I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks!
Cheers ~Kat
Menu bar at: (cater-express dot com)

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

I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over.

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

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