bei mouseover element ausblenden oder text durch links austauschen

[tiger.lilly]

hallo zusammen.

schon den ganzen tag schlage ich mich mit diesem thema herum und habe noch keine antwort gefunden. vielleicht kann mir ja hier jemand helfen?!

ich erstelle aktuell eine website für eine bekannte: http://home.arcor.de/margitdrescher/-/-/-/B/R/A/N/D/N/E/U/-/-/-/index.htm

dabei sind die verschiedenen kategorien ihrer tätigkeit in balken untergliedert. auf diesen balken stehen wiederum die links zu ihren arbeiten. nun war eigentlich geplant, dass zunächst in kursiver schrift die kategorie-headlines in den balken stehen statt den links. und die links sollten erst bei mouseover der balken sichtbar werden. wie kann ich das jedoch machen?

optimaler weise würde also in den weißen klammern z.b. "editorial design" stehen, fährt man über den balken verschwindet "editorial design" und die eigentlichen links zu den arbeiten werden sichtbar.

ich hoffe, es wird deutlich, was ich meine. im anhang findet ihr noch ein beispiel, wie das aussehen sollte.

in meiner verzweiflung bin ich schon an dem punkt, dass ich versuchte über den balken mit links einen zweiten, gleich aussehenden balken mit kursiver schrift zu setzen. wenn ich dort aber im css

#bg-editorial:hover {
visibility:hidden;
}

anwende, flackert es - verständlicher weise.

bisher habe ich nur scripts gefunden, die entweder ein element einblenden oder durch klicken verschwinden lassen.

am liebsten wäre mir, wenn ich mit html und css auskommen könnte ...

über jeden (verständlichen) tipp wäre ich äußerst dankbar!!
viele grüße und schon einmal vielen dank.

 

[prm]

Vom Prinzip her müsste es nach dieser Methode klappen: Horizontales Dropdown-Men

Dabei müsstest du folgende Änderungen vornehmen:
Bei #menu h3 gib einen Wert für die Zeilenhöhe ein, z.B.

line-height: 80px;

und weise dort eine Hintergrundgrafik mit deinen eckigen Klammern zu.

#menu ul ul ergänze mit

top: 0;

Was dann noch nicht gelöst ist, ist eine neue Hintergrundgrafik für den Hover-Effekt. Diese müsstest du möglicherweise slicen und individuell den Einzellinks per Klasse zuweisen. Eine ad-hoc-Lösung hab ich dazu momentan nicht parat.

 

[tiger.lilly]

weitere versuche

danke für deine antwort. ich hab mich bisher auch mit navi-scripts rumgeschlagen, aber irgendwie funktioniert das so nicht. v.a. weil dann elemente eingeblendet werden und nicht ausgeblendet. denn mittlerweile bin ich mir sicher, dass die einzige möglichkeit wirklich ein zweiter balken mit kursiver schrift ist, der bei mouseover verschwinden muss.

ich habe noch einmal rum probiert und habe es mittlerweile geschafft den zweiten, darüber liegenden balken auszublenden:

#balken:hover img {
visibility:hidden;
}

allerdings kann ich dann an die links, die ja darunter liegen, nicht ran kommen. wenn ich ein script verwende, mit dem der balken tatsächlich weg (und nicht nur ausgeblendet) ist, fängt es wieder an zu flimmern.

theoretisch würde es funktionieren, dass ich den mouseover-effekt nicht an dem balken ausmache, sondern an dem hintergrundbild (also dem ursprünglichen balken). allerdings offenbar nur, wenn das hintergrundbild in einem div id-tag ist, der balken nur eine darin liegende class. dann kriege ich aber die schwierigkeit, dass die beiden elemente nicht mehr aufeinandern liegen können. und die z-index-reihenfolge muss von unten: hintergrundbild > links > balken sein ... gibt es also die möglichkeit einen div id-tag mit einem anderen div id-tag anzusprechen??

vielen, vielen dank für eure hilfe!!