Superposer div sur la cellule td en utilisant jquery.position lors de l'événement mouseover

Question

J'ai une grande table avec des nombres seulement et une petite taille de police, ce qui le rend difficile à voir. Augmenter la taille des polices n'est pas une option, mais je veux fournir un effet de zoom (sans avoir à utiliser le zoom du navigateur) en utilisant une superposition div simple sur la cellule td planétaire si elle a du contenu.
La div devrait être centrée sur la cellule td et le contenu de la div devrait être remplacé par le contenu textuel de la cellule td planifiée.

Où est mon erreur?
Remarque: J'utilise .delegate() au lieu de .hover() car je fais déjà d'autres tâches nécessitant un délégué.

HTML

<div id="mine"><table border="1" cellspacing="2" cellpadding="2"> 
    <tr><td></td><td></td><td>1</td><td>2</td></tr> 
    <tr><td>3</td><td></td><td></td><td>5</td></tr> 
</table></div> 
<div id="your">vale</div> 

CSS

#your { 
    position: absolute; 
    width: 40px; 
    height: 30px; 
    z-index: 100; 
    border: 1px solid green; 
    text-align: center; 
    vertical-align: middle; 
} 

JS

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover mouseleave', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     $('#your').position({ 
      my: "center bottom", 
      at: "center top", 
      of: this, 
      offset: "0 -20", // Place it above td cell 
      collision: "none" 
     }); 
     $('#your').clearQueue(); 
     $('#your').text($(this).text()).fadeIn(200); 
     } else { 
     $('#your').delay(300).fadeOut(200); 
     } 
    } 
    }); 
}); 

Modifier Je vois #your voler partout dans la première manche, puis la suivante plane, mais il commence à apparaître tous les endroits étranges - y compris à l'extérieur #mine.

Answer 1

L'utilisation d'un div overlay, qui est plus que l'élément qu'il recouvre était une mauvaise idée - il devait être ailleurs.
Voici ce que j'ai fini par faire en séparant "mouseover" & "mouseleave" n'était pas une option, en raison d'autres choses préformées.

JS

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover mouseleave', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     var off = $(this).offset(); 
     $('#your').css({ // Using .position() was buggy. Styles ALWAYS works 
      opacity: '', // Remove it if fadeOut didnt finish properly, eg too fast mouse movement 
      left: (off.left -14)+'px', // 14 is half of box width 
      top: (off.top -20 -37)+'px', // 37 is height of font within box. 20 is to place it above 
     }); 
     $('#your').clearQueue().text($(this).text()).show(); // fadeIn wasnt really needed 
     } else { 
     $('#your').delay(900).fadeOut(150); // long delay to allow moving mouse to another cell without box disappearing fast, else fade out fast 
     } 
    } 
    }); 
}); 

Answer 2

Si votre problème est le scintillement qui se produit, il est parce que vous avez la sortie en fondu #your lorsque vous quittez le td, que vous laissez la deuxième #your apparaît (car #your apparaît sous le curseur de la souris à ce moment-là, puisque vous êtes en vol stationnaire directement sur la td)

façon de résoudre ce problème est d'enlever le mouseleave de #mine et créez un écouteur séparé pour mouseleave spécifiquement pour #your. Donc, lorsque votre souris quitte #your, il va fadeOut #your.

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     $('#your').position({ 
      my: "center", 
      at: "center", 
      of: e, 
      collision: "none" 
     }); 
     $('#your').clearQueue(); 
     $('#your').text($(this).text()).fadeIn(200); 
     } 
    } 
    }); 
}); 

$('#your').mouseleave(function() { 
    $(this).fadeOut(200) 
}); 

Aussi, modifier votre CSS afin que #your ne démarre pas visible sur.

#your { 
    position: absolute; 
    display: none; 
    width: 40px; 
    height: 30px; 
    z-index: 100; 
    border: 1px solid green; 
    text-align: center; 
    vertical-align: middle; 
}