mehrer SPANs in a-Tag

[MarkusK]

Hallo zusammen,

ich hab ein kleines Problem. Ich hab folgende Konstellation:

Einen Link:

  
<a href="#" class="link">  
	<span class="normal">Unser Werdegang</span>  
	<span class="hover">und ab...</span>  
	<span class="active">hilfe und weg</span>  
</a>  

Und das CSS dazu

  
.link {  
	width: 105px;  
	height: 30px;  
	color: yellow;  
	background-color:  	#e0321f;  
	text-decoration:none;  
	display:block;  
	font-size: 12px;  
	text-align:center;  
	margin-bottom: 5px;  
	padding: 5px;	  
	border-top: 3px solid  #f94b38;  
	border-left: 3px solid  #f94b38;  
	border-bottom: 3px solid  #c71906;  
	border-right: 3px solid  #c71906;  
}  
  
.link span.normal {  
	display:block;  
}  
  
.link span.hover {  
	display:none;  
}  
  
.link span.active {  
	display:none;  
}  
  
  
.link:hover span.normal {  
	display:none;  
}  
  
.link:hover span.active {  
	display:none;  
}  
  
  
.link:hover span.hover {  
	display:block;  
}  
  
  
.link:active span.normal {  
	display:none;  
}  
  
.link:active span.active {  
	display:block;  
}  
  
  
.link:active span.hover {  
	display:none;  
}  
  
  
.link:hover {  
	  
	border-top:    3px solid  #ff6451;  
	border-left:   3px solid  #ff6451;  
	border-bottom: 3px solid  #ae0000;  
	border-right:  3px solid  #ae0000;  
}  

Das ganze funktioniert auch soweit in allen Browsern, nur nicht im Firefox.
Der Firefox zeigt den Link in der Statusleiste an, aber der Klick geht nicht.

Hat jemand von euch eine Idee warum nicht?

Danke & Gruß

Markus

[manya]

ich hab ein kleines Problem. Ich hab folgende Konstellation:

Der Firefox zeigt den Link in der Statusleiste an, aber der Klick geht nicht.

Hat jemand von euch eine Idee warum nicht?

Warum das so ist, kann ich leider auch nicht sagen. Vielleicht erklärt es ja noch jemand, es würde mich auch interessieren.

Wenn du den Selektor .link:hover   direkt hinter den Selektor .link setzt, funktioniert es auch im Firefox.

Gruß
manya

[MarkusK]

Warum das so ist, kann ich leider auch nicht sagen. Vielleicht erklärt es ja noch jemand, es würde mich auch interessieren.

Wenn du den Selektor .link:hover   direkt hinter den Selektor .link setzt, funktioniert es auch im Firefox.

Wie meinst du das dahinter setzten?

  
.link span.normal {  
	display:block;  
}  
  
.link:hover span.normal {  
	display:none;  
}  

oder direkt in der Definition

Gruß
manya

Gruß
Markus

[manya]

Wenn du den Selektor .link:hover   direkt hinter den Selektor .link setzt, funktioniert es auch im Firefox.

Wie meinst du das dahinter setzten?

Diese Reihenfolge im stylesheet:

~~~css

a {
        width: 105px;
        height: 30px;
        color: yellow;
        background-color:          #e0321f;
        text-decoration:none;
        display:block;
        font-size: 12px;
        text-align:center;
        margin-bottom: 5px;
        padding: 5px;
        border-top: 3px solid  #f94b38;
        border-left: 3px solid  #f94b38;
        border-bottom: 3px solid  #c71906;
        border-right: 3px solid  #c71906;
}
a:hover {

border-top:    3px solid  #ff6451;
        border-left:   3px solid  #ff6451;
        border-bottom: 3px solid  #ae0000;
        border-right:  3px solid  #ae0000;
}

a span.normal {
        display:block;
}

a span.hover {
        display:none;
}

usw

  
  
Gruß  
manya

[MarkusK]

Wenn du den Selektor .link:hover   direkt hinter den Selektor .link setzt, funktioniert es auch im Firefox.

Klappt immer noch nicht, wenn ich den Text anklicke, funktioniert der Link nicht.

Neben dem <span> funktioniert der Link

Gruß
manya

Gruß
Markus

[manya]

Wenn du den Selektor .link:hover   direkt hinter den Selektor .link setzt, funktioniert es auch im Firefox.

Klappt immer noch nicht, wenn ich den Text anklicke, funktioniert der Link nicht.

oh, ich glaube,ich hatte gestern nur im Safari getestet, und da funktionierte es irgendwann. Heute morgen seltsamerweise nicht mehr. :-/

Ich habe nochmal ein wenig herumprobiert, und dafür erstmal die Klassennamen geändert, da es so für mich übersichtlicher war.
Leider bin ich nicht zu einem Ergebnis gekommen.
Es funktioniert aber in Safari-4, Firefox-1.5 und IE-6, wenn du die Pseudoklasse :active komplett weglässt.

Wenn ich es mir recht überlege, hat es auch nicht so viel Sinn, für :active nochmal einen anderen Linktext anzuzeigen, denn :active ist ja nur der sehr kurze Moment des Anklickens.

Gruß
manya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Untitled Document</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  
<style type="text/css">  
  
body { background-color: #000000; }  
  
a {  
        width: 105px;  
        height: 30px;  
        color: yellow;  
        background-color:   #e0321f;  
        text-decoration:none;  
        display:block;  
        text-align:center;  
        margin-bottom: 5px;  
        padding: 5px;  
        border: 13px inset  red;  
}  
a:hover { border-color: blue;  }  
  
a:active { border-color: silver;  }  
  
  
  
a span.normal {   display:block;  }  
  
a span.mausdrueber {  display:none;  }  
  
a span.klick {  display:none;  }  
  
  
  
a:hover span.normal {  display:none;}  
  
a:hover span.mausdrueber {  display:block;   }  
  
a:hover span.klick {  display:none;  }  
  
  
  
  
  
/*  
a:active span.normal{  
        display:block;   color: black;  
   position: absolute;   top: -30px;  
}  
  
  
a:active span.mausdrueber{  
        display:block;  color: black;  
   position: absolute;   top: -30px;  
}  
  
a:active span.klick{  
        display:block; color: black;  
   position: absolute;   top: -30px;  
}  
  
*/  
</style>  
</head>  
  
<body>  
  
<a href="http://www.google.de" class="link">  
        <span class="normal">Unser Werdegang</span>  
        <span class="mausdrueber">und ab...</span>  
        <span class="klick">hilfe und weg</span>  
</a>  
  
</body>  
</html>

[MarkusK]

Ohne das :active funktioniert es auch im Firefox, ich denk ich werd dass dann so lösen.

Danke für deine Hilfe

Gruß
Markus

[Malcolm Beck´s]

hi,

  

> .link span.normal {  
> 	display:block;  
> }  
> .link:hover span.normal {  
> 	display:none;  
> }  
> .link:active span.normal {  
> 	display:none;  
> }

Hat jemand von euch eine Idee warum nicht?

Nicht direkt, aber ich würde vorschlagen, dass du das ganze Step by Step machst, ein Element nach dem anderen, statt alle auf einmal.
So kannst du Fehlerquellen leichter identifizieren.

mfg

[MarkusK]

hi,

Nicht direkt, aber ich würde vorschlagen, dass du das ganze Step by Step machst, ein Element nach dem anderen, statt alle auf einmal.
So kannst du Fehlerquellen leichter identifizieren.

Hmmm, sobald ich mit dem display:none bzw inline arbeite klappt es nicht mehr. Wenn ich alle spans anzeigen lass, danngehts...

Ich bin echt Ratlos und vermute langsam das das ein Bug im Firefox ist.

mfg

Gruß

Markus

[ChrisB]

Hi,

Hmmm, sobald ich mit dem display:none bzw inline arbeite klappt es nicht mehr. Wenn ich alle spans anzeigen lass, danngehts...

Ich bin echt Ratlos und vermute langsam das das ein Bug im Firefox ist.

Hast du mal ein (vollständiges, auf's wesentliche reduziertes, valides) Online-Beispiel dazu, bitte?

MfG ChrisB

[MudGuard]

Hi,

<a href="#" class="link">
<span class="normal">Unser Werdegang</span>
<span class="hover">und ab...</span>
<span class="active">hilfe und weg</span>
</a>

  
Nur mal so als Idee:  
  
Beim hover wird nur .hover angezeigt. Beim Klick wird :active aktiv, wodurch .hover ausgeblendet wird und .active eingeblendet.  
Falls der Browser jetzt zuerst .hover ausblendet (und erst danach .active einblendet), hat der Link für einen Moment keinen Inhalt, ist also 0px breit. Der Mauszeiger befindet sich also außerhalb des Links, der Klick geht daneben ...  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.