pointer-events: none; mit click und hover (& < IE11)

[Chronos]

Hallo Forum,

ich nutze zur Zeit dieses Galerie-jQuery-Plugin http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/

welcher an sich auch super funktioniert, vor allem bringt dieses Plugin auch schöne Funktionen direkt mit (klick auf die linke Hälfte vom Bild, nach links navigieren, auch mit der Tastatur und funktioniert wunderbar auf Touchscreens).

Das Problem ist aber das es per default kein Style für Navigations-Bullets oder -Pfeile gibt.

Ich habe mir jetzt solche Pfeile entworfen und sie auf das Bild gelegt, allerdings nur optisch als Fake, denn die Funktionalität für links/rechts gibt es ja bereits.

Das habe ich mit pointer-events: none; gelöst.

Jetzt folgende Fragen:
- Wie nutze ich pointer-events: none und erhalte dabei den :hover-Zustand und cursor: pointer
- Wie bilde ich pointer-events < IE11 ab?

HTML

<div class="btn-nav-circle">
    <div class="btn-nav-direction arrow-left"></div>
</div>

CSS

.btn-nav-circle {
    position: absolute;
    left: 450px;
    top: 450px;      
   
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%; 
           
    width: 100px;
    height: 100px;
    padding: 10px;
   
    background-color: rgba(0, 66, 114, 0.75);
    z-index: 10002;
   
    cursor: pointer;
}

/* So geht zwar hover, aber der Klick wird nicht durchgereicht */
.btn-nav-circle > * {
    pointer-events: none;
}

.btn-nav-circle:hover {
    background-color: rgb(0, 66, 114);
}

Der Klick geht in der gesamten linken Hälfte, das macht aber nichts, der Pfeil ist nur als Hilfe gedacht.

Hat jemand eine Idee wie ich die beiden Probleme lösen kann? Vor allem das mit Hover und dem durchreichen des Klicks.

 

[Chronos]

Mh hab doch eine Lösung, da das jQuery Plugin ja auch Navigation über die Cursortasten bietet,
fang ich dieses einfach ab, dazu nutze ich noch ein data-tag im HTML:

<div class="btn-nav-circle" data-code="37">
    <div class="btn-nav-direction arrow-left"></div>
</div>

JS:

$('.btn-nav-circle').on({
    "click": function(){
        var code = $(this).data('code');
        $(document).trigger(
            jQuery.Event( 'keyup', { keyCode: code, which: code } )
        );    
    }
});

 

[Chronos]

Nachtrag: auch wenn sich das jetzt in dem Fall erübrigt hat, wäre es trotzdem nett zu wissen, wie man das ansonsten lösen würde