Crianças dentro de Trigger MouseOut. Como evitar isso?
https://stackoverflow.com/questions/2493736
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho isto:
<a href="javascript:void(0);">
<div>
<span>some content</span>
<span>some content</span>
</div>
</a>
O problema está pairando o mouse de um u003Cspan>para outro desencadeia um mouse e o mouseover novamente, mesmo que eles não tenham preenchimento ou margem entre eles. Mesmo na barra de status do navegador, o link pulando por um instante. Como isto pode ser evitado?u003C/span>
Solução 6
Invadiu meu caminho para uma solução. Posição: Relativa a âncora e uma divmious dentro que se expande na largura e na altura 100% absolutamente posicionada para sobrepor exatamente a âncora. Já não agrava o link para pairar e não deve ser nenhum eventos fictícios do MouseOut. Aqui está o código e Aqui está um link :
<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
position:relative;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
.dummy {
z-index:1;
position:absolute;
left:-1px; top:-1px; /* Fix for parent's border, isn't required for no border */
border:1px solid;
border-color:inherit;
background:transparent;
width:100%;
height:100%;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div class="dummy"></div><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>
Outras dicas
Para quem se depara com este post como um arquivo aqui está o que funcionou para mim.
Em vez de usar o mouseout (), tente usar mouseleave () para a tag.
Meu problema foi resultado de elementos dentro de uma div, desencadeando várias chamadas do MouseOut. Mouseleable no objeto pai resolveu isso.
Se você estiver usando o jQuery, você deve mudar para o hover método.
Caso contrário, verifique e.target || e.srcElement.
Não envolva os elementos do bloco nas tags de ancoragem. Tags de âncora são elementos embutidos. Se você estiver tentando usá -los como locais nomeados para o hash de URL (ou seja, para navegação interna na página), basta colocá -los acima do conteúdo em que a página deve rolar.
Se você está tentando fazer algo acontecer quando clicar na div, coloque um manipulador OnClick na div.
Bem, você tem uma lacuna vertical (eu posso ver um feed de linha entre os dois <span> Tag). Remova.
Também vale a pena notar que seu HTML está longe de ser válido. Elementos embutidos como <a> não pode conter elementos de bloco como <div>.
Aqui está uma parte do código que reproduz o problema, ou você pode copiar e colar isso para testá -lo ou Veja aqui a mesma coisa que carreguei para testar :
<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>
Nota: Mesmo usandou003C!doctype html> que permite que as âncoras sejam elementos de bloco, pois o Ricebowl apontou que o resultado é o mesmo. Passando sobre o âncora desencadeia eventos do MouseOut e também faz com que a barra de status pisque o texto do link de destino (pelo menos no Firefox, não testou em outro lugar). Os vãos estão vazios, o que geralmente está errado, mas o mesmo acontece até ter um dentro deles.
