transparante css rollover

[jordas]

Hallo,

Ik ben sind kort bezig met css en in korte tijd een redelijk goed functionerende website weten te produceren (whohoo!). Nu wil ik alleen op de site werken met transparante css kaders die volledig opaque worden op het moment dat je eroverheen hovert met je muis. Deze kaders zijn tevens links. Ik heb het tot nu toe als volgt opgelost:

Html:

<div id="perfectmatch"><a href="http://www.perfectmat.ch" target="_blank"><img src="perfectmatch.jpg" /></a></div>

Css:

#perfectmatch{
position:absolute;
height:330px;
width:400px;
left: 185px;
top: 332px;}

#perfectmatch img a, a:visited, a:active {
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
border-color: #FFFFFF;
border-width:none;
border-style:none;}

#perfectmatch img a:hover {
background-image:url(perfectmatch.jpg);}

Een échte oplossing is het echter niet. Hij werkt als link, hij wordt transparant, maar hij wordt niet opaque bij het hoveren. Daarbij heb ik het probleem dat hij een paarse rand krijgt omdat het een link is. Hij ook niet weg als je iets veranderd aan de border color/width etc.

echt vervelend man

is er iemand die mij kan vertellen wat te doen? Mijn dank zal groot zijn!

groet Sjoerd

 

[Egel]

Het moet deze volgorde zijn: #perfectmatch a img

<style type="text/css">
#perfectmatch {
 position: absolute;
 height: 330px;
 width: 400px;
 left: 185px;
 top: 332px;
 }

#perfectmatch a img {
 border: 0px;
 filter: alpha(opacity=60);
 -moz-opacity: 0.60;
 opacity: 0.60;
 }

#perfectmatch a:hover img {
 filter: alpha(opacity=100);
 -moz-opacity: 1.00;
 opacity: 1.00;
 }
</style>

<div id="perfectmatch"><a href="http://www.perfectmat.ch" target="_blank"><img src="perfectmatch.jpg" /></a></div>

dat switched de opacity bij de hover.


Vr.Gr. Egel.

 

[jordas]

thanks

Mijn dank is groot Egel!