jquery单击透明div不起作用

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

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中，这个CSS将为旧的IE版本加载，如下所示：

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

我希望这有帮助！

Answer 3

您似乎使用了很多 z 索引，这可能是您的问题。尝试更改 #navigationRight 跨度和 #navigationLeft 跨度以获得更好的 z 索引，因为您的"跨度"可能会阻止该区域上的"单击"功能。

这让我在不同的情况下几次陷入困境。