ButtonHover

[Witschi262]

Hallo,
ich möchte für meine Homepage einen schicken "Button Hover" einrichten.Doch, das was ich möchte, ist mit CSS nicht realisierbar.

Ein Beispiel:
GameField :: Let the Games Begin
Wenn man auf einen der Buttons klickt, bewegen sich diese nach oben, und wenn man nun den Cursor wegbewegt, "fällt" der Button nach unten.Außerdem wird ein Text angezeigt!
Ich habe mal Javascript ausgeschalten, und bemerkt, dass es nun nichtmehr funktioniert.
Somit muss es JS sein.

Da ich mich nicht mit Javascript beschäftige, und ich auch nicht Vorhabe, wegen "Buttons" mich damit zu beschäftigen, wollte ich Fragen,
ob jemand ein Codeschnipsel für mich hat, oder ob soetwas eher viel Arbeit sein wird.

Danke!

 

[Suizo]

Und wieso nimmst du nicht den Code von GameField? (Ich habe da keine Buttons ,wie du beschreibst, gefunden.)

 

[xXxPeterPanxXx]

Das müsste sogar mit CSS gehen.

Du müsstest Buttons mit transparenten Hintergrund haben. Dann verwendest du die Pseudoklasse :hover und kannst dann die Position verändern. Jetzt habe ich das sehr kurz erklärt, wenn du Probleme hast -> meld dich.

MfG xXxPeterPanxXx

 

[Witschi262]

Also, die Buttons habe ich bereits.
Mit :hover habe ich mit CSS noch nie gearbeitet.
Also Hilfe bräuchte ich glaube ich (:

 

[xXxPeterPanxXx]

Mit :hover kannst du das Aussehen eines Elementes beim drüberfahren der Maus verändern.

Als Beispiel:

Du hast einen ganz normalen Listenpunkt (<li>), den du mit Css das richtige Aussehen verpasst:

li {
color: #000000;
}

Der Schrift des Listenpunktes ist nun Schwarz, willst du jetzt das Aussehen des Listenpunktes beim drüberfahren verändert kommt :hover zum Einsatz:

li {
color: #000000;
}
li :hover {
color: #ffffff;
}

Ich hoffe du hast es verstanden. Jetzt kannst du :hover verwenden und die Position mit margin und padding verändern.

MfG xXxPeterPanxXx

 

[Witschi262]

ja, aber dann wird ja nur die Posotion veränder aber niciht "dynamisch" bewegt.
Es soll ja auch irgendwie nachunten "fallen"

 

[vitus37]

Ich schliesse mich Suizo an, du kannst ja mal in den Code guggen und evtl das verantwortliche JavaScript kopieren/abändern.

 

[Witschi262]

Wie gesagt, leider habe ich mit JavaScript 0 Erfahrung und bin somit nicht in der Lage einen Code auszuschließen, oder nicht.
Danke für Eure antwowrten. Folgender Code kam dabei heraus und funktioniert:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuMid a").hover(function(){
$('<div id="tt"><div id="tttop"></div><div id="ttcont"><b>'+$(this).attr("alt")+'</b><br>'+$(this).find("img").attr("alt")+'</div><div id="ttbot"></div></div>').css({top: $(this).offset().top - 100, left: $(this).offset().left + 19, opacity: 0}).appendTo("body").delay(200).animate({opacity: .9}, 300);
$(this).find("img").animate({marginTop: "-=10px"});
}, function(){
$("#tt").animate({opacity: 0}, 300, function(){ $(this).remove(); });
$(this).find("img").animate({marginTop: "+=10px"}, 400, "easeOutBounce");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#UserBarMid a").hover(function(){
$('<div id="tt"><div id="tttop"></div><div id="ttcont"><b>'+$(this).attr("alt")+'</b><br>'+$(this).find("img").attr("alt")+'</div><div id="ttbot"></div></div>').css({top: $(this).offset().top - 100, left: $(this).offset().left + 19, opacity: 0}).appendTo("body").delay(200).animate({opacity: .9}, 300);
$(this).find("img").animate({marginTop: "-=10px"});
}, function(){
$("#tt").animate({opacity: 0}, 300, function(){ $(this).remove(); });
$(this).find("img").animate({marginTop: "+=10px"}, 400, "easeOutBounce");
});
});
</script>