the bottom line: visibility in jQuery ?

the bottom line: visibility in jQuery ?

Got a problem.

Basically it's this: as  I understand it,  jQuery uses 'display' to hide/show, and I need similar functionality with 'visibility'.

Here's what I've been using:

$(document).ready(function(){
$('.hex').hover(function(){
$(this).find('.hN').show(); 
});
})

If you check this test page in IE7 (or IE8 in compatability mode) all the six-line figures are cut off at five lines: when you mouseover them, using the above function, the bottom line become svisible, and a number below it appears.

Except one: top row, second from right (Hexagram 2): it shows all six lines. 

BUT, it's styling the number at the bottom with 'visibility' and not display; so the jQuery function doesn't work.

Can anyone suggest a way through? Maybe there's a straight javascript way to do the same thing as the JQuery function, but using 'visibility'? Or can jQuery use 'visibility' ? 

Or is there another way to kill this version of the guillotine bug?