javascript - change - Detectar IF sobre el elemento con jQuery
jquery parent (10)
No estoy buscando una acción para llamar al pasar el ratón, sino una forma de saber si un elemento se está pasando por alto en este momento. Por ejemplo:
$(''#elem'').mouseIsOver(); // returns true or false
¿Hay un método jQuery que logra esto?
Actualizaciones de parejas para agregar después de trabajar en este tema por un tiempo:
- todas las soluciones con .is (": hover") se rompen en jQuery 1.9.1
- La razón más probable para verificar si el mouse aún está sobre un elemento es intentar evitar que los eventos se disparen entre sí. Por ejemplo, tuvimos problemas con el mouseleave que se activó y completó antes de que nuestro evento de mouseenter se completara. Por supuesto, esto fue debido a un movimiento rápido del mouse.
Usamos hoverIntent https://github.com/briancherne/jquery-hoverIntent para resolver el problema para nosotros. Esencialmente se dispara si el movimiento del mouse es más deliberado. (Una cosa a tener en cuenta es que se disparará cuando ambos mouse ingresen un elemento y se vayan; si solo quieres usar una pasada, el constructor tiene una función vacía)
Ampliando la respuesta de @Mohamed. Podría usar un poco de encapsulación
Me gusta esto:
jQuery.fn.mouseIsOver = function () {
if($(this[0]).is(":hover"))
{
return true;
}
return false;
};
Úselo como:
$("#elem").mouseIsOver();//returns true or false
Bifurcó el violín: http://jsfiddle.net/cgWdF/1/
Establecer una bandera en el vuelo estacionario:
var over = false;
$(''#elem'').hover(function() {
over = true;
},
function () {
over = false;
});
Luego solo revisa tu bandera.
Establecer una bandera por cada respuesta de kinakuta parece razonable, puede colocar un oyente en el cuerpo para que pueda verificar si algún elemento está sobrevolando en un instante determinado.
Sin embargo, ¿cómo quieres lidiar con los nodos secundarios? Quizás deberías comprobar si el elemento es un antepasado del elemento que está suspendido actualmente.
<script>
var isOver = (function() {
var overElement;
return {
// Set the "over" element
set: function(e) {
overElement = e.target || e.srcElement;
},
// Return the current "over" element
get: function() {
return overElement;
},
// Check if element is the current "over" element
check: function(element) {
return element == overElement;
},
// Check if element is, or an ancestor of, the
// current "over" element
checkAll: function(element) {
while (overElement.parentNode) {
if (element == overElement) return true;
overElement = overElement.parentNode;
}
return false;
}
};
}());
// Check every second if p0 is being hovered over
window.setInterval( function() {
var el = document.getElementById(''p0'');
document.getElementById(''msg'').innerHTML = isOver.checkAll(el);
}, 1000);
</script>
<body onmouseover="isOver.set(event);">
<div>Here is a div
<p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
</div>
<div id="msg"></div>
</body>
La respuesta aceptada no funcionó para mí en JQuery 2.x .is(":hover") devuelve falso en cada llamada.
Terminé con una solución bastante simple que funciona:
function isHovered(selector) {
return $(selector+":hover").length > 0
}
Me gusta la primera respuesta, pero para mí es extraño. Al intentar verificar justo después de cargar la página para el mouse, tengo que poner al menos un retraso de 500 milisegundos para que funcione:
$(window).on(''load'', function() {
setTimeout(function() {
$(''img:hover'').fadeOut().fadeIn();
}, 500);
});
No funciona en jQuery 1.9. Hizo este complemento basado en la respuesta del usuario2444818.
jQuery.fn.mouseIsOver = function () {
return $(this).parent().find($(this).selector + ":hover").length > 0;
};
Puedes filtrar tu elemento de todos los elementos suspendidos. Código problemático:
element.filter('':hover'')
Guardar código:
jQuery('':hover'').filter(element)
Para devolver boolean:
jQuery('':hover'').filter(element).length===0
Utilizar:
var hovered = $("#parent").find("#element:hover").length;
jQuery 1.9+
Respuesta original (y correcta):
Puede usar is() y verificar el selector :hover .
var isHovered = $(''#elem'').is(":hover"); // returns true or false
Ejemplo: http://jsfiddle.net/Meligy/2kyaJ/3/
(Esto solo funciona cuando el selector coincide con UN elemento máximo. Consulte Edición 3 para obtener más información)
.
Edición 1 (29 de junio de 2013): (Aplicable solo a jQuery 1.9.x, ya que funciona con 1.10+, ver siguiente Edición 2)
Esta respuesta fue la mejor solución en el momento en que se respondió la pregunta. Este selector '': hover'' se eliminó con la eliminación del método .hover() en jQuery 1.9.x.
Curiosamente, una respuesta reciente de "allicarn" muestra que es posible usar :hover como selector CSS (frente a Sizzle) cuando lo prefija con un selector $($(this).selector + ":hover").length > 0 , y ¡parece funcionar!
Además, el complemento hoverIntent mencionado en otra respuesta se ve muy bien también.
Editar 2 (21 de septiembre de 2013): funciona .is(":hover")
En base a otro comentario, he notado que la forma original en la que .is(":hover") , .is(":hover") , todavía funciona en jQuery, entonces.
Funcionó en jQuery 1.7.x.
Dejó de funcionar en 1.9.1, cuando alguien me lo informó, y todos pensamos que estaba relacionado con que jQuery eliminara el alias de
hoverpara el manejo de eventos en esa versión.Funcionó nuevamente en jQuery 1.10.1 y 2.0.2 (quizás 2.0.x), lo que sugiere que la falla en 1.9.x fue un error o no un comportamiento intencional como pensamos en el punto anterior.
Si desea probar esto en una versión específica de jQuery, abra el ejemplo JSFidlle al principio de esta respuesta, cambie a la versión jQuery deseada y haga clic en "Ejecutar". Si el color cambia en el vuelo estacionario, funciona.
.
Edit 3 (9 de marzo de 2014): solo funciona cuando la secuencia jQuery contiene un solo elemento
Como lo muestra @Wilmer en los comentarios, tiene un violín que ni siquiera funciona contra las versiones de jQuery que yo y otros aquí probé. Cuando traté de descubrir qué tenía de especial su caso, noté que estaba intentando verificar elementos múltiples a la vez. Esto arrojaba Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover .
Entonces, trabajando con su violín, esto NO funciona:
var isHovered = !!$(''#up, #down'').filter(":hover").length;
Mientras esto funciona:
var isHovered = !!$(''#up,#down'').
filter(function() { return $(this).is(":hover"); }).length;
También funciona con secuencias jQuery que contienen un solo elemento, como si el selector original coincidiera solo con un elemento, o si .first() en los resultados, etc.
Esto también se menciona en mi boletín informativo de JavaScript + Web Dev Tips & Resources .