Mouseover und cursor:pointer nur bei aktiviertem JavaScript anbieten

05.04.2013

Da Sie inzwischen JavaScript über CSS steuern können, lassen sich CSS-Eigenschaften auch abhängig vom aktivierten JavaScript definieren.

Im CSS können Sie festlegen, welche Klassen bestimmte Elemente zusätzlich zugewiesen bekommen. Diese Klassen können dann wiederum per CSS oder JavaScript angesprochen werden.

cursor:pointer über die ui.js bei aktiviertem JavaScript ergänzen

.clickable   {-w-add-classes:wglClickable}

In diesem Beispiel werden alle Elemente der Klasse clickable um die Klasse wglClickable ergänzt, welche wiederum über die ui.js automatisch den Cursor gesetzt bekommt.

cursor:pointer und Mouseover über die ui.js und zusätzlichen CSS-Selektoren ergänzen

.listEntryClickable,
.listEntryInnerClickable         {-w-add-classes:listEntryClickableJS}

.listEntryClickableJS            {cursor:pointer}
.listEntryClickableJS:hover      {background:url(/wGlobalProject/wGlobal/layout/images/links/list-next.png) right bottom no-repeat;background-color:#f0f0f0}

In diesem Beispiel werden alle Elemente der Klassen listEntryClickable und listEntryInnerClickable über die ui.js um die frei definierte Klasse listentryClickableJS ergänzt, welche in der nächsten Zeile wiederum beliebig gestaltet werden kann.     

In beiden Fällen werden die Cursor und Mouseover-Effekte direkt oder indirekt über JavaScript gesetzt, so dass sie nur bei aktiviertem JavaScript verfügbar sind.