mouseover transparency

[cybernet]

i have this to files

http://code.google.com/p/cyby/source/browse/trunk/js/cyber.js and

http://code.google.com/p/cyby/source/browse/trunk/css/cyber.css

 

i know this has 2 different topic for each one but together they create a usefull mouseover

 

what i'm trying to do is to make the mouseover transparent where can i change that

 

after a google search i know that "opacity:0.4;filter:alpha(opacity=40)" will do the trick but i have no idea where to edit

any help will be appreciated 

[cssfreakie]

as far as css

 

you need to add a hover state (:hover) to your stylesheet

 

for instance

 

a:hover{
   background:red;
}

 

On hover all links get a red background.

[cybernet]

thanks for the reply

this is the output of the mouseover ( without you're modification )

 

 

that background is #0e0d0b but i don't wanna change that, i just wanna make it transparent

 

like this ( i modified the image with gimp )

[cssfreakie]

well you add the stuff you find (I edited that a bit) and place it in the hover state,

 

So in case it's a div

<div class="transparent-class">your content</div>

with class transparent do this:

 

 

div.transparent-class:hover {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}

 

But you are going to have troubles with this because the transparent property of the div, is also the maximum transparency of the inner elements. (in other words you tect will become transparent too no matter what) Unless you use rgba, but that is not widely supported. So the best thing to do is create a tiny semi transparent giv in a color you like and let it repeat.

 

div.transparent-class:hover {
        background: url(../images/my-semi-trans-image.png) repeat;
}

 

That's how i do it (just pay attention IE6,5 don't support transparent png's that well but if you google, they made a nice script for it in JS)

[cssfreakie]

I meant a semi transparent png, gif's are transparent or not