Hintergrundgrafik ändern bei mouseover -> CSS

[viril]

Hallo, ich möchte bei einem div bei rollover das hintergrundbild austauschen.

ich habe das mal folgendermaßen probiert:

...
<div class="clix"></div>
...

.clix a:link .clix a:active {
    background: url(images/image_clix.gif) no-repeat left top;
	height: 25px;
	width: 150px;
}
.clix a:hover .clix a:visited {
    background: url(image_clix_1.gif) no-repeat left top;
	height: 25px;
	width: 150px;
}

aber irgendwie tut sich da garnichts... was mache ich falsch? Hat mir jemand nen tipp ?

[steffenk]

mehrere Selektoren werden mit Komma getrennt

[Boris]

Zudem musst Du den A's noch ein display: block; verpassen

[viril]

hmmm.... so ??
klappt immernoch nicht....

.clix a:link, .clix a:active {
    background: url(images/image_clix.gif) no-repeat left top;
	height: 25px;
	width: 150px;
             display: block;
}
.clix a:hover, .clix a:visited {
    background: url(image_clix_1.gif) no-repeat left top;
	height: 25px;
	width: 150px;
             display: block;
}

@Boris
Was meinst du damit ? steh grad bissle aufm schlauch...

[Boris]

Also eigentlich müsste das reichen und auch funktionieren, sofern der Pfad zum Bild stimmt:

<a href="/" class="clix">Test</a>

a.clix
{
	display: block;
	width: 150px;
	height: 25px;
	background: url(images/image_clix.gif) no-repeat;
}

a.clix:hover
{
	background: url(image_clix_1.gif) no-repeat;
}

[viril]

also ich hab das nochmal versucht, leider noch immer erfolglos...

in der ausgabe kommt überhauptnichts....
kann es vielleicht auch daran liegen das ich ein CMS verwende ?
Ich habe ein template erstellt, ist eine PHP mit einem CSS File
meine anderen verweise stimmen soweit alle...

hier mal etwas mehr aus dem core:

...
<td width="600" valign="bottom" background="templates/.../images/logo.jpg" class=title>
	<div href="#" class="nc"></span>clix</div>
	<div href="#" class="clix">clix</div>
	<div href="#" class="forum">forum</div>
	<div href="#" class="guide">guide</div>
</td>
...

und das CSS

...
a.clix
{
	display: block;
	width: 150px;
	height: 25px;
	background: url(templates/.../images/image_clix.gif) no-repeat;
}

a.clix:hover
{
	background: url(image_clix_1.gif) no-repeat;
}
...

übrigens danke für die Hilfe!

[Boris]

<div href="#" ? ... nee, das geht so nicht. Du musst das schon so schreiben:

<div><a href="#" class="clix">Dein Link</a></div>