Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Link nur erreichbar wenn a:hover
#1
Hallo zusammen,

ich habe folgendes Problem:

Ich habe ein Bild. Auf dem Bild befindet sich in zentraler Position ein Link, welcher standardmäßig ausgeblentdet ist. Erst bei a:hover wird dieser sichtbar.

Das Problem ist, das der Link nicht sichtbar ist, aber trotzdem, wenn ich auf diesen Link-Bereich klicke, das die URL aufgerufen wird.

Wenn ich nun ein



Code:
a{
  pointer-events: none;
}


a:hover{
  pointer-events: auto;
}

einfüge funktioniert der Link nicht wenn ich mit der Maus drauf stehe.

Ich mache das so, weil sich das darunterliegende Bild vergrößert, wenn ich mit der Maus darüber fahre. Diesen Hover-Effekt kann ich nicht direkt mit dem Smartphone darstellen. Deshalb habe ich mit den Inhalt mit ergänzt, sodass das Bild vergrößert wird wenn ich beim Smartphone darauf klicke. Dazu habe ich
Code:
cursor: pointer ;
für den äußeren div-Bereich festgelegt.
Zitieren
#2
Hi,

ich bin mir nicht sicher ob ich dich komplett verstanden habe.

Dennoch:

Der Link umgibt mit Sicherheit das Bilder oder? <a href=""><img ></a>

Somit ist die funktion auch so richtig.

Warum nicht mit Javascript nacharbeiten?

<div class="outercontainer">
<img data-href="xyz" src="">
</div>
$('.outercontainer').click(function(){
window.location = $(this).find('img').data('href');
});

So sollte das gehen. Nicht getestet, sollte aber klappen.

Wichtig ist halt den Href in ein Data Element im IMG Tag zu packen.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste