nicht angemeldet
Verschachtelte div span tags, Linkverhalten überschreiben?
0 0
0 1 
Gunnar Bittersmann
Verschachtelte div span tags, Linkverhalten überschreiben?
Hallo,
ich habe versucht mein Problem mal zu vereinfachen. Gehen wir hierfür weiterhin davon aus, dass wir den HTML-Code NICHT verändern können, sondern nur den CSS.
Das Verhalten des ersten Links ist so wie ich es möchte.
Das des zweiten aber nicht. Wenn ich über den zweiten Link hover, dann möchte ich ihn underlined haben. Die Farbe ändert sich zwar, aber die neue text-decoration wird nicht angewendet. Wie kann ich in dem span-tag der Klasse .mytest die decoration nur dort überschreiben?
Danke
<html>
<head>
<style type="text/css">
.myclass p a{
text-decoration:underline;
}
.myclass p a:hover{
text-decoration:none;
}
.mytest a:hover{
color:red;
text-decoration:unterline;
}
</style>
</head>
<body>
<div class="myclass">
<p>
<a href="#">working link</a>
<span class="mytest">
<a href="#">NOT working link when hover</a>
</span>
</p>
</div>
</body>
</html>
-
Hi,
das liegt an der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren>
.myclass p a:hover{
}ist spezifischer als
.mytest a:hover{
}und wird daher genommen.
Mit Tools wie Firebug (für Firefox) oder ähnlichem lässt sich so etwas sehr leicht nachvollziehen.
~dave
-
Dh im Klartext es geht nicht nur mit CSS??
Was könnte ich denn im HTML Code ändern, damit es funktioniert?
*ratlos*-
@@doodle:
nuqneH
Dh im Klartext es geht nicht nur mit CSS??
Doch, es geht. Du hast dir die verlinkte Stelle in SELFHTML nicht angesehen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Doch, die hatte ich erst danach gesehen. Sorry.
Also muss ich die Anzahl der selektierten Elemente erhöhen. Aber wenn ich jetzt noch irgendwelche Elemente bei .mytest reinschreibe, dann muss ich die ja auch irgendwo im HTML Code unterbringen. Und das möcht ich ja umgehen...
-
Om nah hoo pez nyeetz, doodle!
Also muss ich die Anzahl der selektierten Elemente erhöhen.
Du könnstest auch die entsprechenden Anzahlen in dem "unerwünschten" Selektor verringern
Aber wenn ich jetzt noch irgendwelche Elemente bei .mytest reinschreibe, dann muss ich die ja auch irgendwo im HTML Code unterbringen.
nein
Aber wenn ich jetzt noch irgendwelche Elemente bei .mytest reinschreibe,
nicht irgendwelche, nimm die, die schon da sind. Man sollte niemals Elemente ohne Zweck verwenden.
Matthias
--
-
Ich raffs einfach nicht.
Wenn ich vorhandene Elemente nehmen (div, p, span), dann funktioniert das aber nicht..mytest div p a:hover
Aber das ergibt ja keinen Sinn, wie muss ich die denn anordnen?
Danke für eure Geduld :)
-
-
Ja, ausführlichen Selektor erzeugen mit den Elementen, die ich habe.
Hab mir die verlinkte Seite dazu auch schon zig mal hoch und runter gelesen, und auch verstanden, aber wenn ich jetzt zb ".mytest div p span a:hover" schreibe funktioniert das nicht. Aber ich versteh nicht warum. -
OMG hat jemand bemerkt, dass ich in dem Testcode "unterline" bei der .mytest Klasse geschrieben hab? Arg.
Ist es richtig, wenn ich "span.mytest a:hover" schreibe? Zumindest geht es damit.
-
Om nah hoo pez nyeetz, doodle!
Ist es richtig, wenn ich "span.mytest a:hover" schreibe? Zumindest geht es damit.
Wenn du die Spezifität errechnest, kannst du die Frage selbst beantworten.
Zum Beispiel wäre auch
.myclass p .mytest a:hovermöglich gewesen.Beachte aber, dass dies zwar für den geposteten Code funktioniert, ob es jedoch für das Originalprojekt unerwünschte Nebenwirkungen gibt, lässt sich nicht sagen.
Matthias
--
-
-
-
-
-
-
-
Om nah hoo pez nyeetz, doodle!
Was könnte ich denn im HTML Code ändern, damit es funktioniert?
Du hast doch geschrieben, dass du das HTML nicht ändern kannst. Die Sinnhaftigkeit deines Codes ist anhand des Fragments nicht prüfbar. Es gibt aber eine CSS-Lösung.
Matthias
--
-
Ja richtig, das hatte ich geschrieben, weil ich nach Möglichkeit eine CSS Lösung suchen.
-
-
-
-
Om nah hoo pez nyeetz, doodle!
Das des zweiten aber nicht. Wenn ich über den zweiten Link hover, dann möchte ich ihn underlined haben. Die Farbe ändert sich zwar, aber die neue text-decoration wird nicht angewendet. Wie kann ich in dem span-tag der Klasse .mytest die decoration nur dort überschreiben?
indem du dir einen ausführlicheren Nachfolgeselektor suchst.
Matthias
--
-
@@doodle:
nuqneH
Das des zweiten aber nicht. Wenn ich über den zweiten Link hover, dann möchte ich ihn underlined haben. Die Farbe ändert sich zwar
Das heißt, der Selektor '
.mytest a:hover' wirkt.aber die neue text-decoration wird nicht angewendet.
Das heißt, der Selektor '
.mytest a:hover' überschreibt nicht die Angaben für den Selektor '.myclass p a:hover'.Wie kann ich in dem span-tag […]
span-Element. [Meiert]
[…] der Klasse .mytest die decoration nur dort überschreiben?
Beschäftige dich mit der Spezifität von Selektoren. [CSS21 §6.4.3, http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=SELFHTML]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
[latex]Mae govannen![/latex]
Wie kann ich in dem span-tag […]
span-Element. [Meiert]
Oder auch so: http://csswizardry.com/eta :)
Cü,
Kai
--
~~~ ken SENT ME ~~~
Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
in Richtung "Mess up the Web".(suit)
SelfHTML-Forum-Stylesheet
-