jquery點擊透明div不工作

我必須在圖像上方箭頭才能導航到上一個或下一個圖像。箭頭的div沒有背景色。當我點擊該框時，會顯示警報。這在整個div中是可能的。當使用箭頭在div下顯示圖像時，該點擊在Internet Explorer中不起作用，但可在Firefox和Chrome中使用。用戶不能導航到下一個或上一個圖像。當您給箭頭背景顏色的框時，它確實有效，但您將無法看到圖像。jquery點擊透明div不工作

有人可以幫我嗎？下面是一個工作很快的示例項目。

謝謝！

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

來源

2012-06-15 Ralph Jansen

它爲我工作http://jsfiddle.net/wKGpS/，你確定你沒有用箭頭在div上添加圖片嗎？ –

哪個版本的IE瀏覽器打破了？我在你的代碼中創建了一個小提琴，它在IE8和IE9中工作：http://jsfiddle.net/z2va9/1/ – Chris

對於它的價值，我也嘗試過在IE7和兼容模式下的IE8，它仍然作品。 – Chris

只是可以肯定，使一個1x1透明GIF和使用它作爲背景圖片爲您的股利。這個訣竅（是嗎？）來自過去。

來源

2012-06-15 19:16:05

我認爲這將工作，但我不想使用圖片。這應該只能用於CSS。 –

不需要透明的圖像：A液是足夠大，它是不是在你的DIV可見使用的文字 - 這裏有一個例子：因爲這個問題已經在IE9中，你已經解決了

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

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

可以把它放在一個有條件的CSS中，這個CSS會被舊版本的IE瀏覽器加載，例如：

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

我希望這有助於！

來源

2013-03-15 11:08:58 Daniel

您似乎在使用大量的z-index，這可能是您的問題。嘗試更改#navigationRight跨度和#navigationLeft跨度以獲得卓越的z-index，因爲您的跨度可能會阻止該區域的「點擊」功能。

這讓我在不同的情況下出現了幾次。

來源

2014-03-10 00:31:36 Stonestorm

jquery點擊透明div不工作

回答

相關問題