Ignorar a interação do mouse na imagem de sobreposição

94

Eu tenho uma barra de menu com efeitos de foco e agora quero colocar uma imagem transparente com um círculo e um texto "desenhado à mão" sobre um dos itens do menu. Se eu usar o posicionamento absoluto para colocar a imagem de sobreposição acima do item de menu, o usuário não conseguirá clicar no botão e o efeito de foco não funcionará.

Existe alguma maneira de desabilitar de alguma forma a interação do mouse com esta imagem de sobreposição para que o menu continue funcionando como antes, mesmo que esteja abaixo de uma imagem?

Editar:

Como o menu foi gerado com o joomla, não pude ajustar apenas um dos itens do menu. E mesmo que pudesse, não achei que uma solução javascript fosse apropriada. Portanto, no final, "marquei" o item de menu com uma seta fora do elemento de item de menu. Não tão bom quanto eu queria que fosse, mas funcionou bem de qualquer maneira.

— Daniel
fonte

236

A melhor solução que encontrei é com estilo CSS:

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

pointer-events atributo funciona muito bem e é simples.

— DZenBot
fonte

Sim - Isso é bom. Ele também funciona na supressão de testes de impacto para elementos sem fundos definidos que estão sendo usados como contêineres para outros itens (que você realmente deseja testar.)

— Armentage

4

Lembre-se de que os eventos de ponteiro ainda não são suportados por todos os principais navegadores. O IE não oferece suporte (surpresa ...), e acho que o Safari também não oferece suporte.

— Hatchmaster,

3

Safari está ok, de acordo com este caniuse.com/#search=pointer-events , apenas Opera e iE foram lançados

— Logic Wreck

também gostaria de ignorar o cursor

— William Entriken

1

Funciona bem com d3 e svg também. Resolvido um problema para mim em que a caixa de foco cresceu muito a ponto de ficar sob o mouse.

— Michael Hobbs

2

Então eu fiz isso e funciona no Firefox 3.5 no Windows XP. Ele mostra uma caixa com algum texto, uma sobreposição de imagem e um div transparente acima que intercepta todos os cliques.

<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>

O que eu fiz: criei um div e o dimensionei para ser o tamanho de uma opção de menu, 100x40px (um valor arbitrário, mas ajuda a ilustrar o exemplo).

O div tem uma sobreposição de imagem e uma sobreposição de link. O link contém um div de tamanho igual ao div 'menuOption'. Dessa forma, um clique do usuário é capturado em toda a caixa.

Você precisará fornecer sua própria imagem durante o teste. :)

Advertência: se você espera que o botão do menu responda à interação do usuário (por exemplo, mudar a cor para simular um botão), então você precisará de um código extra anexado ao javascript que você invocará na tag, esse código extra pode endereçar o ' elemento menuOption 'através do DOM e alterar sua cor.

Além disso, não há outra maneira que eu conheço de você pegar um evento click e fazer com que ele seja registrado em um elemento abaixo de um elemento de página visível. Eu tentei isso também neste verão e não encontrei outra solução além desta.

Espero que isto ajude.

PS: O artigo sobre os eventos no quirksmode ajudou muito a me ajudar a entender como os eventos se comportam nos navegadores.

— Mike Mytkowski
fonte

1

Dê ao botão uma propriedade de Z-index maior do que a imagem desenhada à mão:

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

entretanto, certifique-se de testá-lo em todos os principais navegadores. O IE interpreta o índice z de maneira diferente do FF. Para alguém apresentar mais detalhes, você teria que postar mais informações, um link seria o melhor.

— Pekka
fonte

1

Isso não vai esconder a imagem desenhada à mão?

— Roatin Marth

Não se o link for transparente.

— Pekka

0

Com base no que Pekka Gaiser disse, acho que o seguinte funcionará. Pegando seu exemplo e retrabalhando-o:

<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>

Aqui, você deve ser capaz de colocar um evento na tag subjacente e, a menos que sua imagem tenha um evento, inicia uma captura (navegadores! IE) e, em seguida, elimina a propagação do evento.

Se precisar de mais ajuda, conte-nos um pouco mais sobre a situação.

— jeremyosborne
fonte

0

Se a imagem for posicionada estaticamente, você pode capturar o evento de clique da imagem conforme ela surge, colocando a tag img dentro do elemento do item de menu.

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

— bogphanny
fonte