Переключение Div с помощью jQuery (или CSS3)

Question

У меня есть div, который содержит изображение, которое является ссылкой на другую страницу сайта. Я хочу перевернуть это. Содержимое на оборотной стороне изображения будет текстом, который также может содержать дополнительные ссылки.

Я видел Flip, QuickFlip 1 & 2 и различные другие плагины и переходы для переходов CSS3, НО проблема в том, что все они (насколько я нашел) включают в себя нажатие на сам div для выполнения переключения.

Поскольку div содержит ссылки спереди и сзади, это, очевидно, не подойдет для моих целей, и мне нужна кнопка / щелчок вне области div / flip-area. По какой-то причине я не видел ничего подобного.

Кто-нибудь знает что-нибудь или есть идеи?

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-индексы подстраиваются под ваши ссылки и т. Д. «Выше» маскирующего 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;
    }

});