phpBB.de

Verfasst: **19.10.2007 13:02**

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;
}

Verfasst: **19.10.2007 14:04**

Hi Elvis,

schau Dir das mal an:

http://alistapart.com/articles/slidingdoors2

Verfasst: **19.10.2007 19:03**

Hallo,

und hier das ganze in Deutsch

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

Verfasst: **20.10.2007 10:01**

OK Danke werde cih mir mal genauer ansehen.

Verfasst: **24.10.2007 16:13**

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;
}

Verfasst: **24.10.2007 19:01**

@ PureSpider

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

trotzdem Danke

Verfasst: **24.10.2007 21:17**

Entschuldigung das ich hier so einfach rein Platze aber:

PureSpider hat geschrieben:
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.

Verfasst: **24.10.2007 21:32**

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?

Verfasst: **27.10.2007 15:29**

ja das verstehe ich.

Danke für deine Erklärung.

phpBB.de

Hover Effekt, Bilder untereinander

Hover Effekt, Bilder untereinander