Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di renzoz
    Registrato dal
    May 2001
    Messaggi
    305

    Scorrimento div onmouseout con jquery

    Ciao, ho trovato questo codice che ho un pò adattato alla mia esigenza cambiando l'evento click con mouseover e funziona, però se sul pannello che appare sono contenuti altri elementi tipo div e ci passo sopra con il mouse il pannello torna allo stato originale.
    C'è un modo per cui l'effetto mouseout funzioni solo quando esco dall'area del pannello ma rimanga aperto anche se con il mouse vado su elementi annidati?

    Questo è l'esempio su cui sto provando:

    codice:
    <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Documento senza titolo</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>   <script type="text/javascript">  $(document).ready(function(){ 	   $("#flip").mouseover(function(){     $("#pannello").slideDown("slow");   });      $("#pannello").mouseout(function(){     $("#pannello").slideUp("slow");   });    }); </script>   <style type="text/css">  #flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #pannello { padding:50px; display:none; background-color:#cecece; }  .uno { width:100px; height:50px; background-color:#ff0000; } </style>  </head>  <body> <div id="flip">Click to slide down panel</div> <div id="pannello">Hello world!
     <div class="uno">Altro div</div>  </div> </body> </html>
    Molte grazie a chi mi saprà aiutare

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Formatta il codice su più righe grazie.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di renzoz
    Registrato dal
    May 2001
    Messaggi
    305
    Chiedo scusa, eccolo:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Documento senza titolo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    
    
    <script type="text/javascript"> 
    $(document).ready(function(){
    	
      $("#flip").mouseover(function(){
        $("#pannello").slideDown("slow");
      });
      
      $("#pannello").mouseout(function(){
        $("#pannello").slideUp("slow");
      });
      
    });
    </script>
     
    <style type="text/css"> 
    #flip
    {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    #pannello
    {
    padding:50px;
    display:none;
    background-color:#cecece;
    }
    
    .uno
    {
    width:100px; height:50px;
    background-color:#ff0000;
    }
    </style>
    
    </head>
    
    <body>
    <div id="flip">Click to slide down panel</div>
    <div id="pannello">Hello world!
    
    <div class="uno">Altro div</div>
    
    </div>
    </body>
    </html>

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    prova con mouseenter e mouseleave

  5. #5
    Utente di HTML.it L'avatar di renzoz
    Registrato dal
    May 2001
    Messaggi
    305
    Grazie Vindav, funziona alla grande!!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.