Using visibility to toggle hidden elements?

Question

please see this fiddle http://jsfiddle.net/rabelais/e47xq/6/

When you hover on the thumbnails the hidden images are shown, but I want to use visibility: hidden, instead of display: none, is this possible?

$(".thumnails").on("mouseover mouseout", "a", function () {
$('[title="' + $(this).attr('href') + '"]').toggle();
 });

Answer 1

Sure you can, just create your own toggle functionality

$(".thumnails").on("mouseover mouseout", "a", function () {
    var flag = $(this).data('flag');

    $('[title="' + $(this).attr('href') + '"]').css('visibility', flag ? 'hidden' : 'visible');

    $(this).data('flag', !flag);
});

FIDDLE

or split the events

$(".thumnails").on({
    mouseover: function() {
        $('[title="' + $(this).attr('href') + '"]').css('visibility', 'visible');
    },    
    mouseout: function () {
        $('[title="' + $(this).attr('href') + '"]').css('visibility', 'hidden'); 
    }
}, 'a');

FIDDLE

Answer 2

Try:

$('[title="' + $(this).attr('href') + '"]').css('visibility', function (i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
});

DEMO

Answer 3

Here you are:

$(".thumnails").on("mouseover mouseout", "a", function () {
    $('[title="' + $(this).attr('href') + '"]').toggle(
        function(){
            $(this).css('visibility', 'hidden');
        },
        function(){
            $(this).css('visibility', 'visible');
        });
});

Answer 4

You can do this using the $.hover() function as well:

$(".thumnails a").hover(function () {        
        $('[title="' + $(this).attr('href') + '"]').css('visibility', 'visible');
    }, function() {
        $('[title="' + $(this).attr('href') + '"]').css('visibility', 'hidden');
    });