Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

212
Visualizações
Does jQuery have a handleout for .delegate('hover')?

I am trying to use:

$('mydiv').delegate('hover', function() {  
    $('seconddiv').show();  
}, function() {  
    //For some reason jQuery won't run this line of code  
    $('seconddiv').hide();  
});
over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

User113716's great answer will no longer work in jQuery 1.9+, because the pseudo-event hover is no longer supported (upgrade guide).

Also since jQuery 3.0 delegate() for binding events is officially deprecated, so please use the new on()(docs) for all event binding purposes.

You can easily migrate user113716's solution by replacing hover with mouseenter mouseleave and switching to the on() syntax:

$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});

If your problem is more complex than a simple toggle, I suggest binding two separate events:

$('mydiv').on('mouseenter', 'seconddiv', function( event ) {
    // do something
}).on('mouseleave', 'seconddiv', function( event ) {
    // do something different
});

NB: Since hover was removed in v1.9 and on() was introduced in v1.7, there is no real need for a solution using delegate() - but if you like it for some reason; it is still there (for now) and does the job:

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});
over 4 years ago · Santiago Trujillo Relatório

0

With delegate()(docs) , you assign it to a container, and the first argument is the element that should trigger the event.

Also, .delegate() accepts only one function, so for the hover event you need to test the event.type to determine show()(docs) or hide()(docs) .

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $('seconddiv').show();  
    else
        $('seconddiv').hide();  
});

For show/hide, a shorter way to write this is to use toggle()(docs), which can accept a switch argument where true means show and false means hide:

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    $('seconddiv').toggle( event.type === 'mouseenter' );  
});

Note that the mouseenter event is reported as of jQuery 1.4.3. If you're using 1.4.2, it will be reported as mouseover.


EDIT:

If I'm understanding your comments below, you'd have something like this (using the proper selectors of course).

$('mydiv').delegate('seconddiv','hover', function( event ) {
    $(this).toggle( event.type === 'mouseenter' );  
});
over 4 years ago · Santiago Trujillo Relatório

0

I know the OP wanted a delegate solution (so was I when I bumped into this question...)

But after further investigation I found out its possible to achieve the same without js/jquery code at all

All you need is a bit of CSS

.someContainer .seconddiv{
    display : none;
}

.someContainer:hover .seconddiv{
    display : block;
}

INMO it a much more efficient/ligthwheigth solution

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda