CSS/HTML: div ausgrauen/disablen

[Tim (Gast)]

Ich habe HTML-Seiten mit einem Menübereich und jeweils einem separaten 
DIV mit Inhalt. Jetzt möchte ich dieses DIV ausgrauen und deaktivieren 
können (und nur das DIV), d.h. man soll anschauen dürfen, aber nichts 
darin soll anklickbar sein, keine Links, aber vor allem keine inputs 
o.ä.
Auch nicht mit der Tastatur oder dem Touchscreen auf dem Smartphone.

Wie kriege ich das hin? Ein großes DIV über die ganze Seite, das 
halbdurchscheinend ist, scheidet aus, weil es das Menü außer Kraft 
setzt, welches ja bedienbar bleiben soll.

[Daniel A. (daniel-a)]

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

[Tim (Gast)]

Das Problem damit ist, dass man per Tastatur noch überall hinkommt und 
tippen kann. Die Kontrollen sind zwar alle "tot" und ohne Funktion, aber 
es sollte eben auch tot aussehen.

[Daniel A. (daniel-a)]

Tim schrieb:
> Das Problem damit ist, dass man per Tastatur noch überall hinkommt und
> tippen kann.

Das Problem scheint mit CSS nicht lösbar zu sein. Man müsste jedem input 
Feld ein readonly oder ein disabled attribut verpassen. Man könnte das 
zwar auch mit JS machen, ist aber auch unschön.

for(let d of Array.from(document.querySelectorAll(".disabled input, .disabled textarea")))
  d.disabled="disabled";

> Die Kontrollen sind zwar alle "tot" und ohne Funktion, aber
> es sollte eben auch tot aussehen.

Um die Idee ein halb transparentes div darüberzulegen wieder 
aufzugreifen, das geht auch mit einzelnen Elementen statt über die ganze 
Seite. Man muss nur dem darüberliegenden Element etwas anderes als 
"position: static;" zuweisen, z.B. "relative", und dem div "position: 
absolute; left:0; right:0; top:0; bottom: 0;". Geht auch mit dem 
::before pseudoelement. Oder mit einem filter könnte man das auch 
anpassen (filter: grayscale(100%) contrast(50%);).

[Tim (Gast)]

disabled ist irgendwie doof. Es sind nicht nur inputs vorhanden, sondern 
auch canvas mit onclick/onmousemove/ontouchstart/ondragstart und solchen 
Späßen. Da bringt ein disabled gar nichts. Das ist leider sehr 
unbefriedigend und halbherzig implementiert. :/

[Daniel A. (daniel-a)]

Dann musst du die verschiedenen Methoden eben kombinieren. Fix fertige 
Lösungen wird dir hier übrigens vermutlich niemand liefern, es geht in 
diesem Forum mehr um Beratung, Diskussion, Möglichkeiten, und mögliche 
Lösungswege.

[Nop (Gast)]

Zu welchem Zeitpunkt bzw. aufgrund welcher Kriterien entscheidet sich, 
ob Dein Zusatzbereich ausgegraut werden soll?

Wenn beim Laden der Seite, dann geht das mit CSS. Als Beispiel wäre hier 
eine simple Menüführung zu nennen, in der jeweils derjenige Menü-Eintrag 
ausgegraut und disabled ist, der zur aktuellen Seite gehört. Der Witz 
ist hier, daß der betreffende Menülink von vornherein im Source nicht 
als Link vorhanden ist.

Ist der Wunsch eine Änderung nach dem Laden und aufgrund einer 
Nutzerinteraktion mit dem Menü, dann ist Javascript fällig.

Faustregel: alles, was zustandslos ist, geht mit CSS. Zustandsbehaftete 
Sachen brauchen Javascript.