Genaue Anweisung für Button Hover Effekt

[mickey]

Hallo,

ich habe ein Problem:

Ich habe soweit schon zwei Buttons auf meiner Homepage eingebracht, insgesamt vier Grafiken ( zwei background-, zwei hover Bilder ).

Jedoch ist es nun so, dass nun beide Buttons die gleiche Grafik enthalten, Button zwei hat jedoch einen anderen Link.

Ich würde es natürlich gerne so haben, dass auf der einen Grafik eben meinetwegen "XY" steht und auf der zweiten "Z".

Beides sind Grafiken, also es gibt keinen Text.

Das ist der HTML-Code:

<a href="#" class="hover">DJSHOP</a>
               <a href="#" class="hover">DJTUNES</a>

Und das hier das CSS:

.hover{ 
  	 text-decoration: none; 
  	 border:0; 
  	 padding:0;  
  	 display: block; 
  	 text-indent: -9999px; 
  	 letter-spacing: -9999px; 
  	 font-size:0; 
  	 width: 161; 
  	 height:58px; 
  	 background: url("/img/djshop.gif") 0 0 no-repeat;
}
.hover { 
  	 background-position: -160px 0;
}

.hover:hover{ 
  	 text-decoration: none; 
  	 border:0; 
  	 padding:0;  
  	 display: block; 
  	 text-indent: -9999px; 
  	 letter-spacing: -9999px; 
  	 font-size:0; 
  	 width: 161; 
  	 height:58px; 
  	 background: url("/img/djtunes.gif") 0 0 no-repeat;
}
.hover:hover { 
  	 background-position: -160px 0;
}

Wäre jemand so freundlich und könnte mir sagen, was ich machen muss, damit sich die Grafiken unterscheiden, also das bei Button 1 nicht die selbe Grafik wie bei Button 2 ist?

Ich weiss, dass ich eine Definition einbringen muss, damit eben klar ist, welche Grafik zu welchem Code geladen werden soll.



Ich bin noch Anfänger, daher ist das ein wenig holprig geschrieben :)

Vielen Dank für eine Antwort und schon mal Frohe Weihnachten :)

Grüße

 

[Arcsinh]

1. Das sind keine Buttons.
2. Du weist jedem a-Tag eine eigene id zu und jedem einzeln mit CSS einen Hintergrundbild geben.

 

[mickey]

Danke für deine Antwort!

Als was bezeichnet man diese denn sonst?

Meinst du so:

<a href="#" <div id="Button eins">class="hover">DJSHOP</a>
<a href="#" class="hover">DJTUNES</a>

Und wie mache ich das in css?

 

[Arcsinh]

<a href="#" <div id="Button eins">class="hover">DJSHOP</a>

oO

<a href="#" id="a1" class="hover">DJSHOP</a>
<a href="#" id="a2" class="hover">DJTUNES</a>

Und mit CSS sprichst du die so an: #a1 bzw. #a2

 

[mickey]

YEAH!

Vielen Dank!

Hab schöne Weihnachten

 

[Arcsinh]

Bitteschön, du auch!

 

[pangloss]

Kurze Frage, wozu dient hier Class? Man könnte doch auch einfach a1:hover benutzen oder nicht?

 

[alogheo]

Kurze Frage, wozu dient hier Class?

für diesen style

 .hover{ 
        text-decoration: none; 
        border:0; 
        padding:0;  
        display: block; 
        text-indent: -9999px; 
        letter-spacing: -9999px; 
        font-size:0; 
        width: 161; 
        height:58px; 
        background: url("/img/djshop.gif") 0 0 no-repeat;
 }
 .hover { 
        background-position: -160px 0;
 }

 

[pangloss]

also ist der Sinn, bei mehrmaliger Verwendung nur noch die Class .hover angeben zu müssen?

 

[threadi]

Ja, und man kann so leichter später Anpassungen vornehmen. Man muss ja dann nur das CSS bearbeiten.

 

[pangloss]

Sry, aber nochmal. Ich verstehe gerade nicht, worin der Vorteil bei einer Definition per class liegt. Ich könnte doch genauso einfach das Standardelement xyz:hover { eigenschaften }.

 

[threadi]

Die Pseudoklasse hover reagiert auf Mausberührung bzw. -überfahrt. Hier geht es aber um einen Klick, wenn ich mich nicht irre.

 

[Arcsinh]

Du könntest z.B.

a:hover { font-size: 42px; }

schreiben. Das heißt dann es gilt für alle a-Tags. Vllt. willst du aber, dass es nur für ganz bestimmte a-Tags gilt, zum Beispiel nur im Menü und nicht mitten im Text. Dann gibst du einfachen allen a-Tags im Menü die Klasse .menu und kannst sie im nachhinein so ansprechen:

a.menu:hover { font-size: 42px; }

Wenn ich dich richtig verstanden habe, dürfte das deine Frage beantworten...