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:
#ExtraConfigMenu-popup [id^="submenu-"]:hover::after,
#ExtraConfigMenu-popup :is([id^="submenu-"][open])::after { }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.
: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.
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.
#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.
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
Man braucht aber eh eine Definition für sowohl mit als auch ohne :hover, da sparst du nix. 
Den Code zu straffen, nesten und zu minimieren ist was anderes, aber die beiden Zustände musst du so oder so getrennt angeben.
In diesem Fall macht mE der Attribut Selektor von Sören eine Menge Sinn, schlank und einfach.
Man könnte auch noch kaskadiertes CSS nutzen.
CSS ist immer „kaskadierend“. Dafür steht das „C“ in „CSS“ (in englischer Schreibweise). Was du ausgehend von deinem Beispiel offensichtlich meinst, ist „verschachteltes“ CSS.
Ein [open] könnte man noch irgendwo mit reinquetschen;
Du quetscht nicht schlecht.
Das ist es wohl gewesen, jetzt funktioniert es wie gewünscht, und zwar mit diesem String.
#ExtraConfigMenu-popup :is([id^="submenu-"][open])::after {
Danke, hast du gut gemacht.
Das hat immer noch das überflüssige :is() mit drin. Kürzer:
#ExtraConfigMenu-popup [id^="submenu-"][open]::after { }Das hat immer noch das überflüssige :is() mit drin. Kürzer:
CSS#ExtraConfigMenu-popup [id^="submenu-"][open]::after { }
Ich glaube der Code ist so oder so etwas Murks, auch wenn er oberflächlich funktioniert.
Wird [id^="submenu-"] überhaupt wahrgenommen in dem Zusammenhang, oder nur [open] (= Verkettung von Attributen, geht das überhaupt)?
Ersteres ist ein Selektor, dann folgt noch ein (Unter-)Selektor., usw. Das Element, was genau alle Selektoren erfüllt, wird angesprochen.
