Hintergrund eine Link-Grafik "überschatten"?

lisali

lisali

Erfahrenes Mitglied
Hi,

ich möchte gerne meine Navigation animieren und hatte davor "nur" eine Navigation, die bei einem Hover das Bild ändert.

Jetzt möchte ich aber, dass sich das ganze auch nach oben bewegt und wieder nach unten, wenn man es mit der Maus verlässt. Das klappt alles mit diesem JQuery Code:

Code: 
// --- Panel Animation:  
var navDuration = 150;
var navJumpHeight = "5px";
$('#panel li').hover(function() {
$(this).animate({ top : "-="+navJumpHeight }, navDuration);            
}, function() {
$(this).animate({ top : "0px" }, navDuration);
});

Das Problem ist jetzt, dass ich von meinem CSS Code dazu die position auf relative setzen musste:

Code: 
/* --- Panel --- */
ul#panel {margin:0;padding:0;list-style:none; bottom:0; position:absolute}
ul#panel a {display: block; width:94px; height:65px; background-image:url(images/panel.png)}
ul#panel li {float:left;position:relative} /* Hier musste ich es dazuschreiben, damit es mit JQuery funktioniert */
ul#panel li a#home {background-position:0 -65px; width:46px}
ul#panel li a#home:hover, ul#panel li.current a#home {background-position: 0 0}
(Deklaration für weitere Bereiche wie "home"...)

Es klappt auch, jedoch ist die ganze Navigation jetzt sozusagen das vorderste Element. Also, davor war es die ganze Zeit hinter einer transparenten Background-Grafik und wurde von dieser etwa ein Drittel bedeckt.

Meine Frage ist jetzt: Was kann ich tun, damit die Navigation immernoch so benutzbar ist wie jetzt und diese Background-Grafik trotzdem davor ist?

Übrigens sieht das ganze in HTML so in etwa aus:

HTML: 
<div id='head'>
<ul id='panel'><li>...</li>
</panel>
</div>

CSS:
#head { background:url(...); ... }
 
Hi,

wenn ich deine Ausführungen richtig verstanden habe, ist z-index die Eigenschaft, nach der du suchst.

Soll aber das Hintergrundbild in der Schichtposition über der Navigation liegen, gibt's da keine Möglichkeit, dass die darunterliegenden Links mit dem Mauszeiger greifbar / anklickbar sind.

mfg Maik
 
Hi,

das habe ich bereits probiert, aber dann ist die Navigation gar nicht mehr navigierbar und reagiert auf garnichts.

Ist es nicht möglich, dass der transparente Bereich dieses Hintergrundbildes die Maus "durchlässt" irgendwie?
 
Der IE (bis Version 7) macht solche Spielchen mit.

Alle übrigen Browser kannst du auch nicht mit einem Hack dazu bewegen, weil es da schlichtweg keinen für gibt.

mfg Maik
 
Ich weiß nicht, ob du dich mit JS auskennst, aber gäbe es wenigstens beim Umschreiben der JQuery Funktion eine Möglichkeit dazu oder ist dieses von mir erwähnte "geänderte position:relative" die einzige, mögliche Variante, damit überhaupt diese Animation stattfindet? Wieso wird eigentlich dadurch alles an Hintergrundgrafiken nach hinten verlagert?

Und was für eine Möglichkeit wäre das bei dem IE? (interessehalber)
 
Positionier doch einfach mal eine Box über eine andere, und versuch mit einem standardkonformen Browser (FF, IE8, Opera, Safari, usw.) den Inhalt in der unteren Box mit der Maus zu markieren.

Selbst ohne Hintergrundbild für die obere Box wird es dir in diesen Browsern nicht gelingen.

Lediglich die Vorgänger des IE8 lassen das zu, wenn es sich um einen transparenten Hintergrund handelt, oder wie eben beschrieben, das Element überhaupt keinen Hintergrund (Bild / Farbe) besitzt.

mfg Maik
 
Hi

ein (unschönes) Workaround wäre, dass du bei jedem Mausklick überprüfst, ob du über einem Navigationslink bist.
 
@timestamp: Mausklick oder meinst du Hover?

Das wird ja schon geprüft (siehe erster Beitrag)... verstehe nicht ganz genau was du mir damit sagen willst?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück