Selektor für kleinen Pfeil in CSSS-Code zum extra-config-menü.uc.js ab v139

Horstmann

Zitat von FuchsFan

Bei Hover wird zwar das Icon angezeigt, das Submenü öffnet sich, aber sofern mit der Maus das Popup berührt wird verschwindet es .

Ich bin so schwach...

Ein [open] könnte man noch irgendwo mit reinquetschen; aber weil ich nicht meine Nightly Testmaschine anwerfen möchte, hier nur grob geraten, weiss nicht ob das mit ::after klappt:

CSS

#ExtraConfigMenu-popup [id^="submenu-"]:hover::after,
#ExtraConfigMenu-popup :is([id^="submenu-"][open])::after {	}

Mira_Belle

Was mich interessieren würde, ob #ExtraConfigMenu-popup :is([id^="submenu-"]):hover::after { }
oder #ExtraConfigMenu-popup [id^="submenu-"]:hover::after { } nicht funktioniert.

:is ist eine Eigenschaft, oder?
Und [id^="submenu-"] fasst doch nur (#submenu-ucjs,#submenu-css,#submenu-CSSShadow,#submenu-cssweb) zusammen.

Sören Hentzschel

Zitat von Mira_Belle

:is ist eine Eigenschaft, oder?

:is() ist eine Pseudoklasse, zu erkennen am einfachten Doppelpunkt. Der einzige Sinn dieser Pseudoklasse ist es, komplexe Selektoren, bei denen sich ein Teil wiederholt, einfacher zu schreiben. Deswegen ergibt es auch keinen Sinn, :is() mit nur einem Selektor darin zu verwenden. Das wird dann im Gegenteil einfach nur zu einer längere Schreibweise und führt sich selbst damit ad absurdum.

.DeJaVu

Zitat von Mira_Belle

Und [id^="submenu-"] fasst doch nur (#submenu-ucjs,#submenu-css,#submenu-CSSShadow,#submenu-cssweb) zusammen.

Und das ziemlich elegant sogar. Man könnte auch noch kaskadiertes CSS nutzen.

Einführung in den CSS-Cascade - CSS: Cascading Style Sheets | MDN

Der Cascade ist ein Algorithmus, der definiert, wie Benutzeragenten Eigenschaftswerte aus verschiedenen Quellen kombinieren. Die Cascade legt fest, welche…

developer.mozilla.org

CSS

#ExtraConfigMenu-popup {
  #submenu-ucjs,
  #submenu-css,
  #submenu-CSSShadow,
  #submenu-cssweb
  {}
}

Da ist jetzt noch nix mit hofer und after drin.

Aber ich selbst würde :hover und ::after nicht zusammelegen wollen, weil mWn ::after nur für das :hover gilt, aber nicht ohne :hover. Also braucht es schon wieder zwei Definition.

::after
:hover::after

oder

:hover {...::after} (kaskadiertes CSS)

Andersrum dürfte nicht funktionieren, weil after den Content nach einem Element stellt, wobei das Element ge:hover:t wird und ::after zum Element gehört.