Hover Effekt, Bilder untereinander

[Elvis]

Hallo,
ich Probiere gerade einen Hover Effekt mit Bilder für Links was auch klappt bis jetzt. Die Bilder muß ich in zb Photoshop nebeneinander erstellen. Ich möchte aber das diese untereinander erstellt werden können.

Was und wie muß ich das dann in der CSS ändern ?

CSS

Code: Alles auswählen

.hover {
  text-decoration: none;
  border:0;
  padding:0;
  display: block;
  text-indent: -9999px;
  letter-spacing: -9999px;
  font-size:0;
  width: 97px;
  height:24px;
  background: url("test/bild1.jpg") 0 0 no-repeat;
}

.hover:hover {
  background-position: -97px 0;
}

[Dr.Death]

Hi Elvis,

schau Dir das mal an:

http://alistapart.com/articles/slidingdoors2

[Helmut]

Hallo,

und hier das ganze in Deutsch

http://www.thestyleworks.de/tut-art/listnav4.shtml

[Elvis]

OK Danke werde cih mir mal genauer ansehen.

[PureSpider]

Code: Alles auswählen

.hover:hover {
	background-position: -97px 0;
}

dreh das -97px und das 0 um, dann kannst du sie untereinander machen, ich benutze für die links auf meiner page (www.purespider.de) zB pics die sich untereinander befinden
bei mir sieht das dann so aus (meine bilder sind 32px * 16px groß):

Code: Alles auswählen

a[href$='usercp.php']:hover {
	background-position: 0px -16px;
}

[Elvis]

@ PureSpider

bin schon selbst drauf gekommen, die andere version Blick ich irgendwie nciht :/

trotzdem Danke

[Boecki91]

Entschuldigung das ich hier so einfach rein Platze aber:

Code: Alles auswählen

a[href$='usercp.php']:hover

Das
a[href$='irgendwas.html']
sehe ich zum erstenmal, kannst du mir sagen wie das Funktioniert, bzw. mir eine Seite empfehlen wo das erklährt wird?

Ich habe über Google keine treffenden Ergebnisse gefunden bzw. wusste nicht wonach ich genau suchen sollte.

[PureSpider]

ja pass auf... die seiten die's dazu gibt machen das alles relativ kompliziert, also versuch ich das nu einfach mal zu erklären
das is ne seeehr einfache form eines regex'

Code: Alles auswählen

a[href$='usercp.php']:hover

triggert auf links deren href-attribut mit usercp.php aufhören, deshalb das $ ($= endet mit)
wenn du jetzt zB nen style willst der nur auf passwort inputs angewendet wird machst du

Code: Alles auswählen

input[type="password"]

(evtl. eben mit :hover wenn gewünscht)
wenn du jetzt aber zB nen attribut willst das nur triggert wenn du 'n http:// vor dem link hast (^ = beginnt mit), er also extern is machst du das mit

Code: Alles auswählen

a[href^='http://']

verständlich soweit?

[Boecki91]

ja das verstehe ich.

Danke für deine Erklärung.