let's say i have a row like this:
<tr class="trans"><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">blah 1</a></td></tr>
and in the css i have this:
.trans a {
color: white;
}
.trans a:hover {
color: black;
background-color: green;
}
so when i mouseover the link the color of the text will change and there will be the effect of a bar in the background. on mouseover, how can i make the background-color transparent? i tried this:
.trans a:hover {
color: black;
background-color: green;
-moz-opacity: .3;
filter:alpha(opacity=30);
}
this doesnt have any effect though and i think it's because the background-color is not effected. how can i have opacity effect on the background-color on link hover? any suggestions?.trans a:hover {
color: black;
background: transparent;
}actually, not FULLY transparent. maybe to have the same effect as:
-moz-opacity:.3;
filter:alpha(opacity=30);
if it's fully transparent then that's the same as not even including any rule besides changing the text color. i want the background-color to be apparent on hover, just slightly see-through. thanks for the suggestion though Fang. i can have the entire row take the above opacity effect, but then the link text is also see-through.This works with IE but FF makes the text transparent.
Note the parent div must have an id.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {background:#ff9;}
a, a:hover {
color:#000;
}
#trans * {
position: relative;
}
#trans {
width:5em;
color: red;
background:#9cf;
}
.over {
background:#9cf;
filter:alpha(opacity=30);
-moz-opacity:.3;
}
-->
</style>
</head>
<body>
<div id="trans">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="this.parentNode.className='over';"onmouseout="this.parentNode.className='';">link here</a>
</div>
</body>
</html>
<tr class="trans"><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">blah 1</a></td></tr>
and in the css i have this:
.trans a {
color: white;
}
.trans a:hover {
color: black;
background-color: green;
}
so when i mouseover the link the color of the text will change and there will be the effect of a bar in the background. on mouseover, how can i make the background-color transparent? i tried this:
.trans a:hover {
color: black;
background-color: green;
-moz-opacity: .3;
filter:alpha(opacity=30);
}
this doesnt have any effect though and i think it's because the background-color is not effected. how can i have opacity effect on the background-color on link hover? any suggestions?.trans a:hover {
color: black;
background: transparent;
}actually, not FULLY transparent. maybe to have the same effect as:
-moz-opacity:.3;
filter:alpha(opacity=30);
if it's fully transparent then that's the same as not even including any rule besides changing the text color. i want the background-color to be apparent on hover, just slightly see-through. thanks for the suggestion though Fang. i can have the entire row take the above opacity effect, but then the link text is also see-through.This works with IE but FF makes the text transparent.
Note the parent div must have an id.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {background:#ff9;}
a, a:hover {
color:#000;
}
#trans * {
position: relative;
}
#trans {
width:5em;
color: red;
background:#9cf;
}
.over {
background:#9cf;
filter:alpha(opacity=30);
-moz-opacity:.3;
}
-->
</style>
</head>
<body>
<div id="trans">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="this.parentNode.className='over';"onmouseout="this.parentNode.className='';">link here</a>
</div>
</body>
</html>