6. Juni 2013
iOS :hover / onclick Events simulieren

iOS :hover / onclick Events simulieren

Ich wollte grade in einem Projekt einige Schaltflächen wieder umprogrammieren da sie unter iOS nicht verwendbar waren. Hintergrund waren hier bestimmte Unter-Elemente, welche nur bei :hover sichtbar wurden. Da es sich bei diesen Elementen aber um normale Block-Elemente und keine Links handelte, wurden in iOS beim "Tap" auf diese Elemente die Layer nicht sichtbar.

Der Fix für die ganze Sache ist jedoch extrem simpel. Wie es aussieht, werden die "Taps" als :hover akzeptiert wenn die Elemente die CSS-Eigenschaft "cursor: pointer;" haben.

Beispiel CSS, so funktioniert es nicht:

.control { display: none; } .control .control-element{ display: none; } .control:hover .control-element{ display: block; }

So funktioniert es:

.control { cursor: pointer; display: none; } .control .control-element{ display: none; } .control:hover .control-element{ display: block; }