Ignorieren Sie die Mausinteraktion auf dem Overlay-Bild

94

Ich habe eine Menüleiste mit Hover-Effekten und möchte jetzt ein transparentes Bild mit einem Kreis und einem "handgezeichneten" Text über einem der Menüelemente platzieren. Wenn ich das Overlay-Bild mit absoluter Positionierung über dem Menüpunkt platziere, kann der Benutzer nicht auf die Schaltfläche klicken und der Hover-Effekt funktioniert nicht.

Gibt es eine Möglichkeit, die Mausinteraktion mit diesem Overlay-Bild irgendwie zu deaktivieren, damit das Menü wie zuvor weiter funktioniert, obwohl es sich unter einem Bild befindet?

Bearbeiten:

Da das Menü mit Joomla erstellt wurde, konnte ich nicht nur einen der Menüpunkte optimieren. Und selbst wenn ich könnte, hielt ich eine Javascript-Lösung nicht für angemessen. Also habe ich am Ende den Menüpunkt mit einem Pfeil außerhalb des Menüpunktelements "markiert". Nicht so schön, wie ich es mir gewünscht hatte, aber es hat trotzdem geklappt.

— Daniel
quelle

236

Die beste Lösung, die ich gefunden habe, ist mit CSS Styling:

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events Attribut funktioniert ziemlich gut und ist einfach.

— DZenBot
quelle

Yup - Das ist das gute Zeug. Es funktioniert auch bei der Unterdrückung von Treffer-Tests für Elemente ohne Hintergrund, die als Container für andere Elemente verwendet werden (die Sie tatsächlich treffen möchten).

— Armentage

4

Beachten Sie, dass Zeigerereignisse noch nicht von allen gängigen Browsern unterstützt werden. IE unterstützt es nicht (Überraschung ...), und ich denke, Safari unterstützt es auch nicht.

— Hatchmaster

3

Safari ist in Ordnung , laut diesen caniuse.com/#search=pointer-events sind nur Opera und iE raus

— Logic Wreck

möchte auch den Cursor ignorieren

— William Entriken

1

Funktioniert auch gut mit d3 und svg. Es wurde ein Problem für mich gelöst, bei dem die Fokusbox zu groß wurde, bis sie sich unter der Maus befand.

— Michael Hobbs

2

Also habe ich das gemacht und es funktioniert in Firefox 3.5 unter Windows XP. Es zeigt ein Feld mit Text, eine Bildüberlagerung und ein transparentes Div darüber, das alle Klicks abfängt.

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

Was ich getan habe: Ich habe ein Div erstellt und es so dimensioniert, dass es einer Menüoption von 100 x 40 Pixel entspricht (ein beliebiger Wert, der jedoch bei der Veranschaulichung des Beispiels hilfreich ist).

Das div hat eine Bildüberlagerung und eine Linküberlagerung. Der Link enthält ein Div, dessen Größe mit dem 'menuOption'-Div übereinstimmt. Auf diese Weise wird ein Benutzerklick über die gesamte Box erfasst.

Sie müssen beim Testen Ihr eigenes Image bereitstellen. :) :)

Vorsichtsmaßnahme: Wenn Sie erwarten, dass Ihre Menüschaltfläche auf die Benutzerinteraktion reagiert (z. B. Ändern der Farbe, um eine Schaltfläche zu simulieren), benötigen Sie zusätzlichen Code, der an das Javascript angehängt ist, das Sie für das Tag aufrufen. menuOption 'Element durch das DOM und ändern Sie seine Farbe.

Ich weiß auch nicht, dass Sie ein Klickereignis auf einem Element unter einem sichtbaren Seitenelement registrieren können. Ich habe dies auch diesen Sommer versucht und keine andere Lösung als diese gefunden.

Hoffe das hilft.

PS: Das Aufschreiben von Ereignissen im Quirksmode hat mir sehr geholfen zu verstehen, wie sich Ereignisse in Browsern verhalten.

— Mike Mytkowski
quelle

1

Geben Sie der Schaltfläche eine höhere Z-Index-Eigenschaft als dem handgezeichneten Bild:

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

Stellen Sie jedoch sicher, dass Sie es in allen gängigen Browsern testen. IE interpretiert den Z-Index anders als FF. Damit jemand mehr Details erfinden kann, müsste er mehr Informationen posten. Ein Link ist am besten.

— Pekka
quelle

1

Versteckt das nicht das handgezeichnete Bild?

— Roatin Marth

Nicht, wenn der Link transparent ist.

— Pekka

0

Aufbauend auf dem, was Pekka Gaiser gesagt hat, denke ich, dass das Folgende funktionieren wird. Nehmen Sie sein Beispiel und überarbeiten Sie es:

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

Hier sollten Sie in der Lage sein, ein Ereignis auf dem zugrunde liegenden a-Tag zu platzieren und, sofern Ihr Bild kein Ereignis enthält, eine Erfassung (! IE-Browser) zu initiieren und dann die Weitergabe des Ereignisses zu beenden.

Wenn Sie etwas mehr Hilfe benötigen, lassen Sie uns etwas mehr über die Situation wissen.

— jeremyosborne
quelle

0

Wenn das Bild statisch positioniert wird, können Sie das Klickereignis aus dem Bild beim Sprudeln erfassen, indem Sie das img-Tag in das Menüelementelement einfügen.

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>

— Bogphanny
quelle