CSS, Animierte Zitate, Top Responsive, 17.0.2.0

1. offizieller Beitrag

    Hallo allerseits,

    ich verwende das Widget „Animierte Zitate“. Innerhalb des Textes habe ich einen (externen) Link. Dessen Farbe, #177982, habe ich in den Einstellungen („Text-Optionen“) des Widgets festgelegt. Nun würde ich dem Link aber auch gerne eine Hover-Farbe, bspw. #3A3A3D, zuweisen. Eine entsprechende Einstellung bietet das Widget jedoch nicht.

    Hier ein Beispiel: https://www.trpercussion.com/kastagnettenma…ml#quotes_16254

    Jegliche Versuche dies mittels eigenem CSS zu erreichen, sind bislang gescheitert.

    Die Entwicklerwerkzeuge sagen mir:

    CSS
    #quotes_16254.zpQuotes a:not(.nodefaults), #quotes_16254.zpQuotes a:not(.nodefaults):hover
   {
  color: #177982 !important;
}

    Beide Selektoren bekommen hier also von Hause aus die gleiche Farbe.

    Meine gescheiterten Versuche sahen so aus:

    CSS
    <style>
 #quotes_16254.zpQuotes a:not(.nodefaults):hover
   {
  color: #3A3A3D !important;
}
</style>

    bzw.

    CSS
    <style>
.zpQuotes a:not(.nodefaults):hover
   {
  color: #3A3A3D !important;
}
</style>

    Über die eine oder andere Anregung würde ich mich freuen.

    Viele Grüße

    Tom

    • Offizieller Beitrag

    Wenn ich auf Ihrer Seite in den Browser-Entewicklertools folgendes im Head in einen vorhandenen <style>-Block einfüge, dann funktioniert das:

    CSS
    #quotes_16254.zpQuotes a:not(.nodefaults):hover {
  color: red !important;
}

    Hallo Stefan,

    vielen Dank fürs Testen. Was Sie beschreiben, konnte ich auch in den Entwickler-Werkzeugen nachstellen. Nur leider hilft mir das nicht so richtig weiter.

    Warum funktioniert das CSS nicht, wenn ich es unter „Eigenes CSS“ eintrage?

    Ich habe auch in einem frisch angelegten Top Responsive getestet, um anderes eigenes CSS als Fehlerquelle auszuschließen. Aber auch hier ändert der Link seine Farbe beim Drüberfahren nicht. Die ID des Selektors habe ich selbstverständlich angepasst.

    Viele Grüße

    Tom

    • Offizieller Beitrag

    Für mich sieht es so aus, als ob Sie in Ihrem CSS die selbe Farbe für hover und den Normalzustand definiert haben:

    CSS
    #quotes_16254.zpQuotes a:not(.nodefaults), #quotes_16254.zpQuotes a:not(.nodefaults):hover {
	color: #177982!important;
}

    Besser wäre vermutlich etwas in der Art:

    CSS
    #quotes_16254.zpQuotes a:not(.nodefaults) {
color: #177982!important;
}
#quotes_16254.zpQuotes a:not(.nodefaults):hover {
color: red!important;
}

    Oder eben nur den :hover-Zustand definieren:

    CSS
    #quotes_16254.zpQuotes a:not(.nodefaults):hover {
color: red!important;
}

    Hallo Stefan,

    nicht ich, sondern das Widget vergibt die gleiche Farbe für den Normalzustand und das Mouseover.

    Screenshot aus einem frischen Top Responsive:

    Egal ob ich nun nur das Mouseover mit CSS gestalte oder auch nochmals den Normalzustand hinzunehme, es bleibt alles wirkungslos.

    Die einfachste Lösung wäre vielleicht, dem Widget noch eine Einstellung fürs Mouseover zu spendieren.

    Viele Grüße

    Tom

    Hallo Stefan,

    bislang war es ja nicht veröffentlicht, da es ja lokal schon nicht funktioniert hat. Jetzt habe ich es aber mit

    veröffentlicht. Ich kann den Eintrag jetzt allerdings auch nicht finden.

    Viele Grüße

    Tom

    • Offizieller Beitrag

    PS: Ich habe das eigene CSS nun gefunden. Es greift nicht, weil es leider im Quelltext vor dem vom Widget injizierten CSS im Quelltext auftaucht. Das können/wollen wir aktuell nicht ändern. Ich hoffe, Sie haben noch so viel Geduld bis zur 17.1.

    Bis dahin könnte es helfen, zumindest per "text-decoration" die Links bei Hover unterstrichen darzustellen.

    Wunderbar! Sie sind nicht blind, und ich nicht völlig blöd.

    Und natürlich kann ich mich gedulden.

    Vielen Dank und viele Grüße

    Tom

    Drcymbal Probier mal die Spezifität des Selektors zu Erhöhen, dann könnte es klappen:

    CSS
    #content #zpMainContent #quotes_16254.zpQuotes a:not(.nodefaults):hover {
  color: red !important;
}

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

    Hallo Phil, hallo Stefan,

    vielen Dank an Euch beide. Mit der höheren Spezifität klappt es wunderbar. Stefans Vorschlag ("text-decoration") war aber auch schon eine sehr gute Alternative. Trotzdem freue ich mich auf die Version 17.01.

    Viele Grüße

    Tom

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden