2012-02-07 3 views
5

Ho bisogno di evitare lo sfarfallio della tabella html al passaggio del mouse. quando qualcuno passa il mouse su una riga mostra un pulsante, ma il tavolo sembra un po 'strano.Evitare lo sfarfallio della tabella html al passaggio del mouse

Ecco il mio codice http://jsfiddle.net/7nqLg/2/

+1

Non puoi semplicemente mostrare i pulsanti per tutto il tempo? Sono ciò che sta spingendo l'altezza e la larghezza e rendendola "tremolante". – Jivings

+0

Non vedo alcun sfarfallio della tabella .. solo la dimensione della riga aumenta per contenere il pulsante .. –

risposta

4

Usa mouseenter e mouseleave invece.

jQuery('.myRow').mouseenter(function() { 
    jQuery(this).find('div:first').css('visibility', 'visible'); 
}).mouseleave(function() { 
    jQuery(this).find('div:first').css('visibility', 'hidden'); 
}); 

E invece di nascondere l'elemento impostato la sua visibilità per hidden e al passaggio del mouse rendono visible, questo eviterà lo sfarfallio perché il div occupa un po 'di spazio quando si mostra. Rendendone nascosta la visibilità occuperà ancora lo spazio ma non verrà visualizzato.

Demo

+0

Grazie, questo è quello che stavo cercando – Chumillas

0

è necessario impostare l'altezza di default del TD per abbinare la massima altezza su una riga quando gli elementi aggiuntivi sono esposti.

Quindi i CSS per i TD "myRow" devono avere un'altezza minima di 45 pixel.

.myRow td { 
    height:45px; 
} 
0

rendono l'imbottitura della td 2px .. o aumentare l'altezza della riga - td che può ospitare l'8px sul pulsante aswell .. sua attualmente 8px, quindi causeing l'aumento dell'altezza di la riga ..