nicht angemeldet
Text unsichtbar machen beim Mouseover
Moin,
Ich habe ein Problem mit dem Rollovereffekt. In meinem Menü habe ich zum Beispiel über <div> einen Textlink platziert.
Nun möchte ich, daß dieser Text beim Überfahren unsichtbar wird, damit ich in dem layer ein background-image einblenden kann. Ich habs über a:hover { color:transparent; } versucht, aber da wird der Text nur schwarz. Wie könnte ich das über CSS lösen? Danke schonmal für Eure Hilfe.
-
Hi,
Ich habs über a:hover { color:transparent; } versucht
das ist ja auch für den Hintergrund definiert. Du müßtest den Text in ein weiteres Element setzen und dieses dann ausblenden.
freundliche Grüße
Ingo-
Du müßtest den Text in ein weiteres Element setzen und dieses dann ausblenden.
freundliche Grüße
IngoDanke erstmal. Das hab ich gemacht. Das Problem ist jetzt, daß mein Text zwar verschwindet, aber nur sehr zittrig. Anscheinend orientiert sich der Mauszeiger direkt an der Schrift und nicht an der Box. Da ist aber nicht das einzige Problem. Es wäre zu umfangreich, das jetzt hier zu schildern.
Es wäre ganz toll, wenn sich irgendein Auskenner bereit erklären würde, ein ganz einfaches html-Dokument zu erstellen, wo man die richtige Vorgehensweise mal nachvollziehen kann. Meinetwegen einfach das Wort Hallo, das beim Mouse-over ersetzt wird durch ein Bild. Oder vielleicht gibts ja einen guten Link zu einem entsprechendem Beispiel. Vielen Dank schonmal :-)
-
Hi,
Es wäre ganz toll, wenn sich irgendein Auskenner bereit erklären würde, ein ganz einfaches html-Dokument zu erstellen, wo man die richtige Vorgehensweise mal nachvollziehen kann.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
#ebene0, #ebene1 {position:absolute;top:100px;left:100px;}
#ebene1 {visibility: hidden;}
</style>
<script type="text/javascript">
function dpl(stat) {document.getElementById("ebene1").style.visibility = stat? "visible" : "hidden";}
</script>
</head>
<body>
<div id="ebene0" onmouseover="dpl(1)">hallo</div>
<div id="ebene1" onmouseover="dpl(1)" onmouseout="dpl(0)"><img src="spiritOfMob.gif"></div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
function dpl(stat) {
if(document.getElementById) {
document.getElementById("ebene1").style.visibility = stat? "visible" : "hidden";}
}
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
if(document.getElementById) {
ach komm, das ist ein Test.
Und wenn schon, dann auch schoen:
if (!document.getElementById) return null;
...;-)
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
ach komm, das ist ein Test.
Und deswegen gerade in einem exemplarischen Beispiel für Anfänger unbedingt erforderlich. Denn von denen macht sich wohl kaum einer Gedanken darüber, daß das nicht in allen Browsern läuft, und wg. des dann auftretenden Fehlers ggf. auch alle restlichen Script-Anteile mit in den Orkus zieht. :-o
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
Hi,
#ebene0, #ebene1 {position:absolute;top:100px;left:100px;}
wieso absolute Positionierung? Ist doch völlig unnötig.
<script type="text/javascript">
und wieso Javascript? CSS reicht völlig.
function dpl(stat) {document.getElementById("ebene1").style.visibility = stat? "visible" : "hidden";}
Und den Text über visibility auszublenden, könnte (im Fall von CSS ohne Ebenen) zu dem unerwünschten Effekt führen. Ich würde es mal über a:hover span {display:none} probieren. Das A-Element müßte dazu natürlich display:block formatiert sein und eine passende Breite (in em) bekommen.
freundliche Grüße
Ingo-
Hi,
Und den Text über visibility auszublenden, könnte (im Fall von CSS ohne Ebenen) zu dem unerwünschten Effekt führen.
Zu welchem unerwünschten Effekt?
Ich würde es mal über a:hover span {display:none} probieren.
Und damit ggf. eine veränderte Formatierung des Dokumentes in Kauf nehmen?
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Und den Text über visibility auszublenden, könnte (im Fall von CSS ohne Ebenen) zu dem unerwünschten Effekt führen.
Zu welchem unerwünschten Effekt?
dem hier beschriebenem.
Ich würde es mal über a:hover span {display:none} probieren.
Und damit ggf. eine veränderte Formatierung des Dokumentes in Kauf nehmen?
warum habe ich wohl:
Das A-Element müßte dazu natürlich display:block formatiert sein und eine passende Breite (in em) bekommen.
noch dazu erwähnt? Natürlich geht das nicht, wenn die Links im Fließtext integriert sind, aber davon gehe ich bei dieser Problembeschreibung ("In meinem Menü habe ich zum Beispiel über <div> einen Textlink platziert") nicht aus.
freundliche Grüße
Ingo-
Hi,
Zu welchem unerwünschten Effekt?
dem hier beschriebenem.(testing) Ah ja. =:-o
Ich würde es mal über a:hover span {display:none} probieren.
Da sei der IE vor. :-/ So einfach läßt der sich seine Macken nicht abgewöhnen ... :-(
Meine Tests ergaben:
"a:hover span" funktioniert überhaupt nicht, "display" läßt es auf Nimmerwiedersehn verschwinden und "visibility" zittert (aus, Maus einen Pixel weiter: an, noch einen Pixel: aus, ...).
Ergebnis unter Berücksichtigung des IEs: Keine Chance.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
-
-
Hi,
a:hover { color:transparent; } versucht,
a:hover { visibility:hidden; } ist vielleicht passender.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Ich habe ein Problem mit dem Rollovereffekt. In meinem Menü habe ich zum Beispiel über <div> einen Textlink platziert.
Nun möchte ich, daß dieser Text beim Überfahren unsichtbar wird, damit ich in dem layer ein background-image einblenden kann. Ich habs über a:hover { color:transparent; } versucht, aber da wird der Text nur schwarz. Wie könnte ich das über CSS lösen? Danke schonmal für Eure Hilfe.Meinst du sowas in der art: http://javascript.jstruebig.de/exp/test/css-mouseover.html
Struppi.
-
Hi,
Meinst du sowas in der art: http://javascript.jstruebig.de/exp/test/css-mouseover.html
Das Problem ist, daß der Link *selbst* verschwinden soll. Und nach einem display:none kommt er nicht wieder ... :)
Aber ich habe doch noch eine Idee! :-)
Man könnte den umgebenden Container hovern. Wenn das auf den normalen Browsern klappt(?!), könnte man ja den Link auf dem IE mittels seiner CSS-Filter ja transparent machen. ;->
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-