Frage CSS greift nicht auf Safari Browser

[Corraggiouno]

Hallo zusammen,

ich habe in meinem stylesheet folgendes definiert:
h1#logo a {
left:1.5rem;
top:2rem;
position:absolute;
display:block;
font:4rem Herr von Muellerhoff;
color:#fff;
outline: 0;
}
h1#logo a:hover {
left:1.5rem;
top:2rem;
position:absolute;
display:block;
font:4rem Herr von Muellerhoff;
color:#9e1111;
outline: 0;
}
Das hovern bzw. die Farbe beim hovern ändert sich auf allen mobilen Geräten die ich getestet habe.
iPad, Samsung Galaxy S3, S4, iphone6)
Nur das iphone4 macht Problem. Hat da jemand einen Tipp für mich?

 

[MrMurphy]

Hallo

Was soll der "Herr von Muellerhoff"?

Und wie kannst du bei Touchscreen-Geräten hovern?

Gruss

MrMurphy

 

[Corraggiouno]

sorry, ein hovern ist das ja nicht. Aber wenn ich eben die h1 antippe, wird sie in meinem Fall rot. Nur eben nicht auf dem iphone 4
Herr von Muellerhoff ist die Schriftart (google fonts)

 

[MrMurphy]

Hallo

Ein hover-Effekt hat auf Touchscreens keine vorgegebene Auswirkung, da die den hover-Effekt schlicht nicht kennen. Von daher kannst du auf Touchscreens kein bestimmtes Verhalten erwarten. Manche verwenden beim Antippen der hover-Effekt, andere nicht. Jeder Browser in jeder Version kann andere Ergebnisse liefen - und alle sind korrekt.

Du solltest dich mal statt :hover mit :active befassen. Das scheint dem von dir gewollten Verhalten näher zu kommen.

Wobei es den Usern herzlich egal sein wird ob ein Textlink beim Antippen seine Farbe ändert, da er in diesem Moment ganz oder größtenteils von Fingern oder der Hand verdeckt ist.

Gruss

MrMurphy

 

[Corraggiouno]

Besten Dank ;)

 

[Corraggiouno]

jetzt muss ich mich doch nochmal an euch wenden.
aktuell habe ich folgenden CSS-Code definiert:
h1#logo a {
left:1.5rem;
top:2rem;
position:absolute;
display:block;
font:4rem Herr von Muellerhoff;
color:#fff;
outline: 0;
}
h1#logo a:active {
left:1.5rem;
top:2rem;
position:absolute;
display:block;
font:4rem Herr von Muellerhoff;
color:#9e1111;
outline: 0;
}

Wenn ich nun auf einem android-Smartphone die h1 antippe erscheint diese in rot. Was so gewollt ist. Nur auf einem iPhone funktioniert dieser Effekt nicht. Hat mir jemand einen Tipp, wie es auf iPhones bzw. Apple - Geräten funktionieren kann?

 

[SpiceLab]

Probier's mal hiermit:

h1#logo a:active, h1#logo a:focus {
color:#9e1111
}

Die übrigen Regeln können hier getrost weggelassen werden.

 

[djheke]

Sollte der Vorschlag von Spicelab nicht funktionieren, dann kann du im a Element zusätzlich das tabindex-Attribut verwenden. <h1><a href="" tabindex="0">...</h1> Vielleicht klappt's ja.