Problem mit hover

[vmd]

Guten Morgen!

Ich habe eine Frage und zwar ist die hover Funktion auf meiner Website fehlerhaft:

http://www.lewicki.me

Der Fehler:

Der hover Effekt blendet kurz den kompletten Button aus und blendet dann die hover png ein. Im Safari wird die hover png dann überhaupt nicht mehr eingeblendet. Jedoch kann ich trotzdem auf den Button klicken (link funktioniert) obwohl nichts sichtbar ist...

JS

<script type="text/javascript">

$(window).load(function() {
$( '.social1' ).delay(300).fadeIn(2000);
$( '.social2' ).delay(600).fadeIn(2000);
$( '.social3' ).delay(900).fadeIn(2000);


});
</script>

HTML

<a href="https://www.facebook.com/pages/lewickime/373235382701905" class="social1"></a>
<a href="http://www.behance.net/lewicki_dot_me" class="social2"></a>
<a href="http://www.youtube.com/user/fitnessbaley" class="social3"></a>

CSS

.social1 {
bottom: 0px;
height: 64px;
width: 54px;
left: 10px;
background: url(img/ui/fb_btn.png);
position: fixed;
display: none;
z-index: 9999;
}
.social2 {
bottom: 0px;
height: 64px;
width: 54px;
left: 64px;
background: url(img/ui/be_btn.png);
position: fixed;
display: none;
z-index: 9999;
}
.social3 {
bottom: 0px;
height: 64px;
width: 54px;
left: 118px;
background: url(img/ui/you_btn.png);
position: fixed;
display: none;
z-index: 9999;
}


.social1:hover {
background: url(img/ui/fb_btn_h.png);
}
.social2:hover {
background: url(img/ui/be_btn_h.png);
}
.social3:hover {
background: url(img/ui/you_btn_h.png);
}

Ich vermute den Fehler beim ausblenden mit JS, aber wie könnte ich das lösen?

Danke euch

 

[Myhar]

AW: Problem mit hover

Was für ein Button? Ich sehe lediglich den Schriftzug <ewicki, ein Ladegif und einen roten Balken oben auf der Seite. Ansonsten ist die Seite schwarz.
Edit: Nach einmal neuladen sehe ich die Seite auch. Welchen Button meinst du, ich sehe auf der Seite keine Buttons?
Noch eine kleine Anmerkung zu deiner Navigation: Die ist schrecklich. Nur, weil es anders ist, heißt es nicht, dass es gut ist. Animationen die man nicht stoppen kann sind ein Grund, nicht lange auf der Seite zu bleiben.

 

[vmd]

AW: Problem mit hover

Ich bin am überlegen die gesamte Navigation oben in eine Leiste zu packen...

Ja die Buttons unten, rechts und oben. Sie müssten beim hover die Farbe ändern.

Mit welchem Browser/DSL bist du unterwegs?

 

[MyBad]

AW: Problem mit hover

Du solltest mit Sprites arbeiten. Also alle Button-Zustände in eine Grafik verfrachten. Dann muss beim Hovern nicht erst eine neue Grafik geladen werden. Das sollte dein Problem beseitigen.

 

[NiAlMa]

AW: Problem mit hover

Wie MyBad bereits geschieben hat - am besten alles mit Sprites machen denn so verkürzt sich die Ladezeit da die Grafik nur "verschoben" wird

 

[Technology]

AW: Problem mit hover

kann man auch musik wieder geben lassen bei einem hover effeckt ?

 

[Myhar]

AW: Problem mit hover

Was hat das mit der Frage zu tun?
Und Musik auf Webseiten ist generell keine gute Idee, das sollte man besser sein lassen.
Mit einfachem CSS ist es nicht möglich, Musik abzuspielen, du müsstest das per JS selber schreiben. Also einen eventlistener für mouseover definieren, einen Musikplayer einbinden und das gewünschte File bei Bedarf abspielen.