Desde el enlace JQuery Forward Mouse Event Example es actualmente muerto, he escrito algo de código jQuery para manejar un caso simple:
- div de superposición con una imagen transparente y sin enlaces
- div subyacente con enlaces
Objetivo: mantener la superposición visible, hacer que los enlaces funcionen y que el cursor cambie cuando se pasa por un enlace.
Método: compare la ubicación del mouse con cada desplazamiento de enlace().
No manejo eventos generales de mouse, solo trato los eventos que necesito ad-hoc. Por lo tanto, es realmente una solución en lugar de la mejor solución, que manejaría todos los eventos del mouse de forma abstracta, algo así como usar el anterior WildDelegate() después de verificar la geometría. Además, solo me preocupan ciertos elementos de enlace, no todo el DOM en capas.
function mouse_event_over_element(evt, elem) {
var o= elem.offset();
var w= elem.width();
var h= elem.height();
return evt.pageX >= o.left && evt.pageX <= o.left + w && evt.pageY >= o.top && evt.pageY <= o.top + h;
}
$(overlay_selector).click(function(e){
$(underlay_selector + ' a').each(function() {
if (mouse_event_over_element(e, $(this))) {
// $(this).click(); // trigger a jQuery click() handler
// quickDelegate(e, this); // not in IE8
// this.click(); // maybe not in Mozilla pre-HTML5
window.location.href= this.href;
return false;
}
});
});
$(overlay_selector).mousemove(function(e){
var newcursor= 'default';
$(underlay_selector + ' a').each(function() {
if (mouse_event_over_element(e, $(this))) {
newcursor= 'pointer';
// $(this).mouseenter(); // trigger a one-argument jQuery hover() event (no mouseleave)
return false;
}
});
$(overlay_selector).css('cursor', newcursor);
});
Uso de la función 'mouse_event_over_element()' geometría que puede manejar otros eventos y elementos.
Hacer: averiguar qué eventos del mouse desencadenan la información sobre herramientas en <a title="foo">
y desencadenarlos() o replicar mostrando la información sobre herramientas. Lo mismo para la línea de estado.
..............................
Edición 2014/09
.. ............................
user2273627 usuario sggested:
Para la descripción por defecto y línea de estado se puede utilizar el índice z CSS-propiedad. Compruebe si el mouse está sobre un enlace y configure el z-index para ese enlace. $ (this) .css ('z-index', '9'); Ponga otro cuando el mouse no esté sobre un elemento y establezca el índice z en automático. Asegúrese de colocar la posición subyacente enlaces: relativa en el css-archivo, de lo contrario z-index no funcionará.
Esta debe ser la respuesta correcta. Me encuentro con este problema cuando uso un SVG superpuesto sobre un lienzo. ¡Nada, y no me refiero a nada más (bibliotecas, CSS u otros) podría resolver esto, y esta pieza de código anterior era lo único que funciona sin problemas! Kudos, querido señor, ¡gracias! –
añado también && (! Event.repeat) –
¿Cómo aplicaría esto? – jmchauv