https://stackoverflow.com/questions/2493736
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo esto:
<a href="javascript:void(0);">
<div>
<span>some content</span>
<span>some content</span>
</div>
</a>
El problema es flotar el ratón de uno u003Cspan>a otro desencadena nuevamente un ratón instantáneo y un mouseover a pesar de que no tienen acolchado ni margen entre ellos. Incluso en la barra de estado del navegador, el enlace parpadea para un instante. ¿Cómo se puede prevenir esto?u003C/span>
Solución 6
Pirateé mi camino hacia una solución. Posición: relativo el ancla y un div ficticio dentro que se expande al ancho y la altura 100% absolutamente posicionada para superponer el ancla exactamente. Ya no demora el enlace de flotar y no debería ser ningún evento de ratón ficticio. Aquí está el código y Aquí hay un enlace :
<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>
Otros consejos
Para cualquiera que se encuentre con esta publicación como un archivo, esto es lo que funcionó para mí.
En lugar de usar el mouseOut (), intente usar MouseLeave () para la etiqueta.
Mi problema fue el resultado de elementos dentro de un divir que desencadenaba múltiples llamadas de ratón. Mouseleve en el objeto principal resolvió esto.
Si está utilizando jQuery, debe cambiar a la hover método.
De lo contrario, verifique e.target || e.srcElement.
No envuelva elementos de bloque en etiquetas de anclaje. Las etiquetas de anclaje son elementos en línea. Si está tratando de usarlos como ubicaciones nombradas para el hash URL (es decir, para la navegación de la página interna), simplemente colóquelos por encima del contenido al que la página debe desplazarse.
Si está tratando de hacer que algo suceda cuando haga clic en el DIV, coloque un controlador de OnClick en el DIV.
Bueno, tienes una brecha vertical (puedo ver una línea de alimentación entre los dos <span> etiquetas). Retirarlo.
También vale la pena señalar que su HTML está lejos de ser válido. Elementos en línea como <a> no puede contener elementos de bloque como <div>.
Aquí hay una parte del código que reproduce el problema, o puede copiar y pegarlo para probarlo o Vea aquí lo mismo que subí para probar :
<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: incluso usandou003C!doctype html> lo que permite que los anclajes sean elementos de bloque, ya que el Ricebowl señaló que el resultado es el mismo. Paseando sobre el ancla desencadena eventos de ratón y también hace la barra de estado para parpadear el texto del enlace de destino (al menos en Firefox, no probó en otro lugar). Los tramos están vacíos, lo que generalmente está mal, pero lo mismo sucede incluso tener un interior.
