javascript - 透明なdivのjqueryクリックが機能しない

Question

前または次の画像に移動するには、画像の上に矢印を移動する必要があります。矢印の div には背景色がありません。ボックスをクリックすると、アラートが表示されます。これはdiv全体で可能です。矢印付きの div の下に画像が表示されている場合、クリックは Internet Explorer では機能しませんが、Firefox と Chrome では機能します。ユーザーは次または前の画像に移動できません。矢印の付いたボックスに背景色を指定すると機能しますが、画像は表示されません。

誰か助けてくれませんか？その下には、すぐに動作するサンプルプロジェクトがあります。

ありがとう！

<div id="photoViewer">     
        <div id="photoViewerDialog" class="photoViewerWindow">
            <div id="photoViewerImageCon">
                <img src="../../Content/ShowImage.jpg" class="image" alt="photo" />
                <div id="navigationBar">
                    <div id="navigationLeft"><span><</span></div>
                    <div id="navigationRight"><span>></span></div>
                </div>
            </div>
        </div>

        <div id="photoViewerMask"></div>    
    </div>

<script type="text/javascript">
        $(document).ready(function () {
            //transition effect     
            $('#photoViewerMask').fadeIn();
            $('#photoViewerMask').fadeTo("slow", 0.8);

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            var borderSpace = 200;
            var minimumSize = 520;

            //Set width and height of photoviewer
            if (winW > minimumSize) {
                if ((winW - borderSpace) > minimumSize) {
                    $('#photoViewer .photoViewerWindow').css('width', winW - borderSpace);
                }
                else {
                    $('#photoViewer .photoViewerWindow').css('width', minimumSize);
                }
            }
            if (winH > minimumSize) {
                if ((winH - borderSpace) > minimumSize) {
                    $('#photoViewer .photoViewerWindow').css('height', winH - borderSpace);
                }
                else {
                    $('#photoViewer .photoViewerWindow').css('height', minimumSize);
                }
            }

            var photoViewerWindow = $('#photoViewer .photoViewerWindow');
            var imageCon = $('#photoViewer .photoViewerWindow #photoViewerImageCon');
            var infoCon = $('#photoViewer .photoViewerWindow #photoViewerInfoCon');
            var infoHeader = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoHeader');
            var InfoThumbs = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoThumbs');

            //Set width and line-height of photo to show
            $(imageCon).width($(photoViewerWindow).width() - $(infoCon).width());
            $(imageCon).css('line-height', $(photoViewerWindow).height() + 'px');

            //Set the popup window to center
            $('#photoViewerDialog').css('top', winH / 2 - $('#photoViewerDialog').height() / 2);
            $('#photoViewerDialog').css('left', winW / 2 - $('#photoViewerDialog').width() / 2);

            //transition effect
            $('#photoViewerDialog').fadeIn();
        });

        $('#navigationLeft').click(function () {
            alert('left');
        });

        $('#navigationRight').click(function () {
            alert('right');
        });

    </script>

CSS

    #photoViewerMask {
    position:absolute;
    z-index:9000;
    background-color:#000000;
    top: 0;
    width: 100%;
    height: 100%;
    }

   #photoViewer .photoViewerWindow {
    position:fixed;
    min-width:520px;
    min-height:520px;
    max-height: 2048px;    
    z-index:9001;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon {
    display: block;
    float: left;
    height: 100%;
    max-height: 2048px;
    position: relative;
    z-index: 9003;
    text-align: center;
    background-color: Black;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon .image {
    vertical-align: middle;
    z-index: 9003;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationBar {
    position: absolute;
    top: 0;    
    left: 0;
    width: 100%;
    height: 100%;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft,
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight {
    color: rgb(255, 255, 255);
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    font-size: 4em;
    position: absolute;
    z-index: 9910;
    top: 0;
    height: 100%;
    cursor: pointer;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft:hover,
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight:hover {
    color: rgb(255, 255, 255);
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft
   {
    /*background-color:Aqua;*/
    width: 20%;
    left: 0px;
   }
   
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft span
   {
    position: absolute;
    left: 20px;
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight
   {
    /*background-color:Fuchsia;*/
    width: 80%;
    right: 0px;
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight span
   {
    position: absolute;
    right: 20px;
   }

score 0 · Accepted Answer

透明な画像を必要としない解決策：divに表示されないほど大きなテキストを使用します-例を次に示します。

.my_clickable_div:after {
   content: '____________________________';
   font-size: 1000px;
   overflow: hidden;

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

この問題はIE9で解決されているため、次のように、古いIEバージョンでは完全に読み込まれる条件付きCSSにこれを配置できます。

<!--[if lt IE 9]><link rel='stylesheet' type='text/css' href='ie_old.css'/><![endif]-->

これがお役に立てば幸いです。

score 0 · Accepted Answer

多くの z-index を使用しているようで、それが問題である可能性があります。#navigationRight スパンと #navigationLeft スパンを変更して、優れた z-index を持つようにしてください。「スパン」がその領域の「クリック」機能をブロックしている可能性があるためです。

これは、別の状況で何度か私を捕まえました。

score 0 · Accepted Answer

念のため、1x1 の透明な gif を作成し、それを div の背景画像として使用してください。このトリック（ですか？）は過去から来ています。

javascript - 透明なdivのjqueryクリックが機能しない

3 に答える 3

Related

Reference