Bild bei a:hover ändern

Cray · 12.06.2007, 14:56

Hi,

ich würde gerne ein Icon, welches vor einem Link steht, bei a:hover ändern. Leider klpapt es bei mir nicht. So sieht es momentan aus:

Code:

.readmore {
	padding-left: 12px;
	background-repeat: no-repeat;
	background-position: 0 8px;
	background-image: url('images/icons/ic_readmore.gif');
}

.readmore a{
	color:#999;
	text-decoration:none;
}

.readmore a:hover{
	color:#999;
	background-image: url('images/icons/ic_readmore2.gif')
}

Habe ich einen Fehler gemacht?

satre · 12.06.2007, 15:51

Kann ich spontan nicht sagen. Wenn das Bild vor dem Link stehen soll, wieso nicht gleich background-position:left;?

Ich löse so was immer als Liste. Klappt wunderbar:

Code:

ul.bullet {
list-style-type:none;
margin-bottom:20px;
}

.bullet a:link, .bullet a:visited {
background-image:url('bilder/ele/bullet01.gif');
background-position:left;
background-repeat:no-repeat;
padding:0 5px 2px 12px;
}

.bullet li {
margin-bottom:8px;
}

.bullet a:hover {
background-image:url('bilder/ele/bullet01_hover.gif');
}

webcreate · 12.06.2007, 16:11

Oder

HTML-Code:

	<style type="text/css">
	.readmore {
		text-decoration:none;
		padding-left: 12px;
		background-repeat: no-repeat;
		background-position: 0 8px;
		background-image: url('1.jpg');
		color:#999;
	}

	.readmore:hover {
		background-image: url('2.jpg')
	}
	</style>
</head>
	<body>
		<a href="#" class="readmore">test</a>
	</body>
</html>

hero-master · 12.06.2007, 17:48

Hi cray

um das mal klar zu stellen was die beiden sicherlich meinten, aber nicht übers Herz brachten zu sagen:
Du definierst zuerst das Hintergrundbild für das Element um den Link, dann kann das natürlich nicht klappen, dass der Link sein Hintergrundbild ändert, wweil ihm ja keins definiert worden ist.

Bei dir sieht das ungefähr so aus:
<div class="readmore"><a href="#">Link</a></div>

Nun gibst du dem Div ein Hintergrundbild mit. Das ist falsch. Du musst dem Link das Hintergrundbild mitgeben, damit du es dann für :hover ändern kannst

Siehe Antwort von webcreate, wobei du es auch so machen kannst:

Code:

.readmore a{
	padding-left: 12px;
	background-repeat: no-repeat;
	background-position: 0 8px;
	background-image: url('images/icons/ic_readmore.gif');
	color:#999;
	text-decoration:none;
}

.readmore a:hover{
	color:#999;
	background-image: url('images/icons/ic_readmore2.gif')
}

webcreate · 12.06.2007, 18:03

^^ Geht aber nur, wenn man dann mit einem Block-Element um den Link arbeitet ...

hero-master · 12.06.2007, 21:15

Zitat:

Zitat von webcreate

^^ Geht aber nur, wenn man dann mit einem Block-Element um den Link arbeitet ...

Wie meinst du das?
Es geht auch mitten im Text, jedoch kapiert das der IE 5.0 nicht, bei dem Rest ist das vollkommen okay

http://nicogutmann.de/test.htm

webcreate · 12.06.2007, 21:31

Bei einem einfachen a-Tag ja, aber wenn Du dem Tag eine Class gibst <a href="#" class="readmore">link</a>
geht es nicht.
Das geht dann nur, wenn Du den Link in ein Block-Element packst: <div class="readmore"><a href="#">Link</a></div>

hero-master · 12.06.2007, 21:38

Achso, bei meinem Beispiel klar

Jetzt geht dann bei mir auch die Birne oben an, sorry Mark

Das mit dem Blockelement scheint er ja drum zu haben nach seinem CSS oben zu urteilen