Question

请看这个小提琴http://jsfiddle.net/rabelais/e47xq/6/

当您将鼠标悬停在缩略图上时，会显示隐藏的图像，但我想使用visibility：hidden，而不是display：none，这可能吗？

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

Answer 1

当然可以，只需创建自己的切换功能

$(".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

或拆分事件

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

FIDDLE

Answer 2

尝试：

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

DEMO

Answer 3

你在这里：

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

Answer 4

您也可以使用$.hover()功能执行此操作：

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

使用可见性来切换隐藏的元素？

4 个答案: