css a:hover

Door bart van der veen op 24-10-2006 12:35

530 views

ik had het volgende bedacht:


a{
	width:136px;
	height:104px;
	display:block;
	text-decoration:none;
}
a:hover{
	background:url('voorstel_over.jpg') top left no-repeat;
	}

dat lijkt niet al te ingewikkeld maar het werkt helaas niet in IE. die doe het namelijk alleen maar als de 'a' een background meekrijgt en background:transparant; mag helaas niet.

nu heb ik een oplossing:


a{
	width:136px;
	height:104px;
	display:block;
	text-decoration:none;
	background:#CCC;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}
a:hover{
	background:url('voorstel_over.jpg') top left no-repeat;
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}

en nu is de vraag, kan het ook makkelijker?

Robert Deiman

24-10-2006 12:59

Waarom mag background: transparent niet dan? Het enige is dat je er een warning door kan krijgen, maar dat betekend niet dat je CSS niet valid kan zijn ;)

bart van der veen

24-10-2006 13:00

of het vallid is maakte me op dit moment niet zo bijzonder veel uit, de hover werkt gewoon niet zonder achtergrond in 'a'

Jason de Ridder

24-10-2006 13:36

ja dat werkt wel, je moet hem alleen in een bepaalde volgorde zetten en allemaal (dus ook visited, link en active)


a:link {
    // vanalles
}
a:visited {
    // van alles
}
a:hover {
    // nog meer
}
a:active {
    // nog meer
}

Zo is de correcte link notatie, probeer maar is. (ook zonder background).

Reageren

Inloggen om te reageren