jquery - 使用 jQuery（或 CSS3）翻转 Div

Question

我有一个 div，其中包含一个图像，该图像是网站上另一个页面的链接。我想翻转这个。图像“反面”上的内容将是文本，其中也可能包含更多链接。

我见过 Flip、QuickFlip 1&2 和各种其他 CSS3 转换插件和 tuts 但问题是它们（据我发现）都涉及单击 div 本身来执行翻转。

因为 div 包含前后链接，这显然不适用于我的目的，我需要的是 div/flip 区域之外的按钮/点击器。出于某种原因，我还没有看到任何这样的事情。

有人知道或有任何想法吗？

Answer 1

这样的事情就足够了吗？（使用上述插件之一。）

$('#your_button_outside_div').click(function(){
    $('#div_that_you_normally_would_have_to_click').trigger('click');
});

然后您可以在“应该被点击”的 DIV 中放置一个 100% 宽度、高度的不可见 DIV，并执行此操作以防止 DIV 中的点击执行翻转：

$('#masking_div').click(function(e){
    e.stopImmediatePropagation();
});

只需确保将 z-indexes 调整为您的链接，等等就在掩码 DIV 的“上方”。

Answer 2

您可以使用这些插件并触发点击事件

$("#the_element").click(); //This will trigger the plugin events

希望这可以帮助。干杯

Answer 3

Wanovak 走在正确的轨道上，但您需要一种更加跨浏览器友好的方法来阻止事件传播。尝试这个：

$('#masked_text').click(function(e){

    // Prevent click event from bubbling up the DOM to the parent container
    try
    {
        event.stopPropagation();
    }
    catch(err)
    {
        // IE does it this way
        window.event.cancelBubble=true;
    }

});