Link soll neue Seite öffnen - Problem mit Android

[akapuma]

Hallo,

ich möchte mit einem Link eine neue Seite öffnen, ohne die alte Seite zu schließen. Die Linkfarben sollen wie folgt sein:
- unbesucht: navy
- besucht: #551a8b;
- Maus drüber (hover): rot

Problem:
Auf Windows ist das mit Chrome, Edge und Seamonkey (Gecko 60) mit dem folgenden CSS-Code kein Problem. Auf dem Android-Handy sieht das anders aus. Wenn ich auf den Link klicke, öffnet sich das neue Fenster. Wenn ich es schließe, dann ist der angeklickte Link immer noch rot. Abhilfe schafft "@media (hover:none)", hiermit wird das hovern abgeschaltet. Der Link ist nicht mehr rot, wenn sich das neue Fenster öffnet.

Ein Problem habe ich mit meiner Android-TV-Box UGOOS X4. Mit "@media (hover:none)" schalte ich das hovern ab - damit kann ich leben. Aber warum bleibt der Link rot, nachdem ich ihn angeklickt habe?

Gruß

akapuma



a:link
{color: navy;}

a:visited
{color: #551a8b;}

a:hover
{color: red;}

@media (hover:none)
{a:hover
{color: navy;}
}

a:active
{color: #551a8b;}

 

[msi]

Das Verhalten auf Android ist normal und hängt mit der Art zusammen, wie mobile Browser mit dem CSS-Pseudoklassen umgehen.

Auf Desktop-Browsern verschwindet :hover sofort, wenn der Mauszeiger den Link verlässt. Auf Touch-Geräten gibt es aber keinen Mauszeiger. Viele Android-Browser simulieren deshalb einen Hover-Zustand nach dem Antippen und behalten ihn teilweise bei, bis ein anderes Element angetippt wird oder die Seite neu dargestellt wird.

 

[akapuma]

Nach tagelangem Probieren habe ich folgende Lösung.

Bei Mobilgeräten verhalten sich ein Android-Handy und eine Android-TV-Box vollkommen unterschiedlich. Problem ist, daß der Link markiert bleibt, wenn ich ein neues Fenster öffne. Was immer funktioniert ist, auf Mobilgeräten die aufrufende Seite neu zu laden.

Das einzige, was nicht funktioniert, ist das hovern auf der TV-Box. Sie hat ja, über ein Touchpad, einen Mauszeiger. Der will einfach nicht hovern :-(


<style>
a:link { color: navy; }
a:visited { color: #551a8b; }
a:focus, a:active { outline: none; }
a:hover, a:visited:hover { color: red;}
</style>

<script>
document.addEventListener('click', function(e) {
var el = e.target;
while (el && el.tagName !== 'A') {
el = el.parentElement;
}

if (el && el.getAttribute('target') === '_blank') {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
setTimeout(function() {
window.location.reload();
}, 100);
}
});
</script>>