Estoy tratando de usar:
$('mydiv').delegate('hover', function() { $('seconddiv').show(); }, function() { //For some reason jQuery won't run this line of code $('seconddiv').hide(); });
La excelente respuesta del usuario hover
ya no funcionará en jQuery 1.9+ , porque el desplazamiento del pseudo evento ya no es compatible ( guía de actualización ).
Además, dado que jQuery 3.0 delegate()
para vincular eventos está oficialmente en desuso, utilice el nuevo on()
(docs) para todos los fines de vinculación de eventos.
Puede migrar fácilmente la solución de user113716 reemplazando hover
con mouseenter mouseleave
y cambiando a la sintaxis on()
:
$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) { $(this).toggle( event.type === 'mouseenter' ); });
Si su problema es más complejo que un simple toggle
, sugiero vincular dos eventos separados:
$('mydiv').on('mouseenter', 'seconddiv', function( event ) { // do something }).on('mouseleave', 'seconddiv', function( event ) { // do something different });
NB: dado que el desplazamiento se eliminó en hover
y on()
se introdujo en v1.7, no hay una necesidad real de una solución usando delegate()
, pero si te gusta por alguna razón; todavía está allí (por ahora) y hace el trabajo:
$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) { $(this).toggle( event.type === 'mouseenter' ); });
Con delegate()
(docs) , lo asigna a un contenedor y el primer argumento es el elemento que debe desencadenar el evento.
Además, .delegate()
acepta solo una función, por lo que para el evento de event.type
hover
determinar show()
(docs) u hide()
(docs) .
$('.someContainer').delegate('.someTarget','hover', function( event ) { if( event.type === 'mouseenter' ) $('seconddiv').show(); else $('seconddiv').hide(); });
Para mostrar/ocultar, una forma más corta de escribir esto es usar toggle()
(docs) , que puede aceptar un argumento de cambio donde true
significa show
y false
significa hide
:
$('.someContainer').delegate('.someTarget','hover', function( event ) { $('seconddiv').toggle( event.type === 'mouseenter' ); });
Tenga en cuenta que el evento mouseenter
se informa a partir de jQuery 1.4.3
. Si está utilizando 1.4.2
, se informará como mouseover
.
EDITAR:
Si entiendo sus comentarios a continuación, tendría algo como esto (usando los selectores adecuados, por supuesto).
$('mydiv').delegate('seconddiv','hover', function( event ) { $(this).toggle( event.type === 'mouseenter' ); });
Sé que el OP quería una solución de delegate
(yo también cuando me topé con esta pregunta...)
Pero después de una mayor investigación , descubrí que es posible lograr lo mismo sin ningún código js/jquery
Todo lo que necesitas es un poco de CSS
.someContainer .seconddiv{ display : none; } .someContainer:hover .seconddiv{ display : block; }
INMO es una solución mucho más eficiente/ligera