Akkordeon :hover per CSS

[Ermurazor]

Hallo zusammen,
ich bekomme es aktuell beim dem neuen Akkordeon (Contao 5) nicht hin, das ein :hover Effekt passiert, wenn ich mit der Maus über Akkordeon Header der einzelnen Elemente gehen (z.b. https://www.leuchtie.de/leuchthalsba...-produkte.html)
Gibt es da vielleicht einen separate Klasse für :hover wie z.B. auch der handorgel__content--open?
Über eine Hilfe wäre ich dankbar, vielleicht stehe ich auch einfach nur auf dem Schlauch grad.
liebe Grüße
Kai

[planepix]

Hallo Kai,

versuche einmal:

.handorgel__header__button:hover {
color: pink;
}

[Ermurazor]

Danke...ja da funktioniert. Ich dachte das hätte ich schon versucht. Habe jetzt mal nochmal alle Speicher gelöscht und dann hat es tatsächlich funktioniert. Musste aber noch ein !important dazu packen. Irgendwie habe ich das Problem schon beim umbauen der Farben gehabt, das ich da alles mit !important machen muss, da es sonst keine Auswirkungen hat.

[mdoll]

Moin,

dass Du das mit !important machen musst, liegt an der Reihenfolge, in der die CSS-Dateien geladen werden. Deine CSS-Anweisungen werden zuerst geladen, und dann erst das CSS vom Akkordion.

Das ist auch bei anderen Inhaltselementen so, die mit eigenem CSS ausgeliefert werden (Content-Slider und Code).

Meiner Meinung ist das ein Bug. Das CSS der Inhaltselemente sollte zuerst im Quelltext eingebunden werden und erst dann die eigenen CSS bzw. die CSS-Dateien des Themes. Denn nur so kann man das CSS einfach per custom.css (und ohne !important) überschreiben.

Alternativ kann man auch das Template für das Akkordion ändern und das mitgelieferte CSS gar nicht laden:

{% extends "@Contao/content_element/accordion.html.twig" %}

{#
  ** Add changes to the base template here. **

  Hint: Try adjusting blocks and attributes instead of
  overwriting the whole template. This way your version
  can remain compatible with future changes to the base
  template as well as adjustments made by extensions.

  Currently available blocks:
    "stylesheet_component", "content", "element",
    "element_header", "element_content", "script",
    "init_options", "style", "headline_component",
    "headline_attributes", "headline_inner",
    "wrapper", "wrapper_tag", "attributes", "inner",
    "metadata"

  Example:
    {% block stylesheet_component %}
       {{ parent() }}
       My additional content for 'stylesheet_component'…
    {% endblock %}
#}
{% block style %}
    {# do not load any accordion stylesheets - declare it in your own css file #}
{% endblock %}

Dann muss man allerdings das komplette CSS für das Akkordion selber schreiben. Oder man kopiert sich das Akkordion CSS von github, schreibt nur die Teile um, die man anders haben möchte und bindet das in sein CSS ein:
https://github.com/contao-components.../handorgel.css

Gruß
Mathias

[Ermurazor]

Danke das habe ich mir schon gedacht, dass der Grund für das !important die Reihenfolge des Ladens der CSS Dateien ist. Aber damit kann ich aktuell gut leben.

[mdoll]

Es gibt mittlerweile ein Ticket bei github dazu:

https://github.com/contao/contao/issues/7124

Ich denke, das wird demnächst behoben, und dann sind die !important Anweisungn obsolet.

Gruß
Mathias