SELFHTML Forum
SELFHTML Forumsarchiv
2010
Januar
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: MarkusK, 29. 01. 2010, 15:26
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
Die folgende Nachricht zum Thema stammt von: manya, 29. 01. 2010, 15:56
»» 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
Die folgende Nachricht zum Thema stammt von: MarkusK, 29. 01. 2010, 16:08
»» 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
Die folgende Nachricht zum Thema stammt von: manya, 29. 01. 2010, 17:15
»» »» 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:
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
Die folgende Nachricht zum Thema stammt von: MarkusK, 29. 01. 2010, 21:16
»» »» »» 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
Die folgende Nachricht zum Thema stammt von: manya, 30. 01. 2010, 08:39
»» »» »» »» 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>
Die folgende Nachricht zum Thema stammt von: MarkusK, 30. 01. 2010, 21:37
Ohne das :active funktioniert es auch im Firefox, ich denk ich werd dass dann so lösen.
Danke für deine Hilfe
Gruß
Markus
Die folgende Nachricht zum Thema stammt von: Malcolm Beck´s, 29. 01. 2010, 16:21
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
--
Die Welt ist verändert ...
Es gibt so viele nette Opas, was ist bei ihnen bloss schief gelaufen?
Die folgende Nachricht zum Thema stammt von: MarkusK, 29. 01. 2010, 21:27
»» 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
Die folgende Nachricht zum Thema stammt von: ChrisB, 30. 01. 2010, 13:51
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
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
Die folgende Nachricht zum Thema stammt von: MudGuard, 30. 01. 2010, 14:13
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?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
© 1998-2008 
Impressum, Software: Classic Forum
(CSS)