Question

我必须在图像上方箭头导航到上一张或下一张图像。箭头的div没有背景颜色。当我点击该框时会显示警报。这可能超过整个div。使用箭头在div下显示图像时，点击不在Internet Explorer中工作，但它在Firefox和Chrome中可以正常工作。用户无法导航到下一个或上一个图像。当您为箭头框提供背景颜色时，它确实有效，但您无法看到图像。

有人可以帮帮我吗？ Beneath是一个免费工作的示例项目。

谢谢！

<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;
   }

Answer 1

为了确定，制作1x1透明gif并将其用作div的背景图像。这个技巧（是吗？）来自过去。

Answer 2

不需要透明图像的解决方案：使用足够大的文本，使其在你的div中不可见 - 这是一个例子：

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

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

因为在IE9中已经解决了这个问题，所以你可以把它放在一个条件的CSS中，这个旧的IE版本将加载olny，如下所示：

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

我希望这有帮助！

Answer 3

您似乎使用了大量的z-index，这可能是您的问题。尝试更改#navigationRight span和#navigationLeft span以获得更高的z-index，因为你的'span'可能会阻止该区域的'click'功能。

在不同的情况下，这几次让我感到很沮丧。

jquery点击透明div不工作

3 个答案: