Управление событиями Click с помощью перекрывающихся элементов

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

Проблема в том, что значок (и его событие щелчка) находится под большим пустым div (синим цветом на скриншоте). Этот div используется для перехода к следующему изображению.

Есть ли решение запустить событие значка и заблокировать событие слайд-шоу?


events jquery slideshow overlapping
person TheLazyFox    schedule 18.04.2013    source источник
comment
Можем ли мы получить код?   -  person Dhaval Marthak    schedule 18.04.2013
comment
Разве вы не можете просто изменить z-индекс значка или контейнера значков, чтобы он отображался над синим div.   -  person Foreign Object    schedule 18.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вот чистый код

<html>
<head>
    <style>
        #slideshowController1
        {
            position: absolute;
            left: 50%;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 98;
            border: 1px solid blue;
        }

        #slideshowController2
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 98;
            border: 1px solid green;
        }

        #pic1
        {
            height: 400px;
            width: 400px;
            border: 1px solid red;
        }

        #delete1
        {
            float: right;
            width: 24px;
            height: 24px;
            margin-top: 0px;
            background-color: black;
        }

        .swipe
        {
            overflow: hidden;
            visibility: hidden;
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .swipe-wrap
        {
            overflow: hidden;
            position: relative;
        }

        #slideShow
        {
            position: relative;
            overflow: hidden;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="slideShow">

        <div id="slideshowController1" class="slideshowController" onclick="alert('right');">
        </div>
        <div id="slideshowController2" class="slideshowController" onclick="alert('left');">
        </div>
        <div id="mySwipe" class="swipe" style="visibility: visible;">
            <div class="swipe-wrap" id="swipe-gallery" style="width: 2500px;">
                <div id="pic1">
                    <div id="delete1" class="thumbDelete" style="z-index: 100;" onclick="alert('delete');">
                        <img src="../../img/delete.png" width="100%">
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>
</body>
</html>

если я поставлю z-index: 100 на mySwipe, это сработает, но только за пределами изображения ... это частичное решение!

Но это не нужная операция, только иконка должна быть над...

Любые идеи ?

person TheLazyFox    schedule 19.04.2013