帶位置的區域上的鼠標位置：絕對區域覆蓋區域

我有一系列float:left divs覆蓋多種position:absolute divs。在鼠標左上或右上四分之一我需要相應的上一個/下一個按鈕出現。下面的例子有希望顯示困境。標準。如果進入第二個div，mouseover（rem'd）不起作用。帶位置的區域上的鼠標位置：絕對區域覆蓋區域

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<div id="x" style="background: transparent; width:222px; height:222px; border:1px solid red"> 
    <BR><BR><BR><BR><BR><BR>TheZone 
</div> 

<div id="y" style="background: #EDEDED; width:112px; height:113px; position:absolute; top:-12px"> 
    <BR><BR><BR>Cover the zone 
</div> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     // $('#x').mouseover(function() { alert('in'); }); 
     $(document).on('mousemove', function(e) { 
      if (e.pageX > $('#x').offset().left && e.pageX < $('#x').offset().left + $('#x').width() && e.pageY > $('#x').offset().top && e.pageY < $('#x').offset().top + $('#x').height()) { 
       alert('zoned'); 
      } 
     }); 
    }); 
</script>

的pageX屬性/ Y解決方案的工作，但我不知道是否有一個更簡單，更優雅，解決方案。特別是作爲等效的鼠標輸出 - 與帶有||的區域內代碼的反向重複...和一個觸發變量，所以區外條件並不總是循環 - 真的讓我看起來像一個零星的變通辦法。任何替代方法？

來源

2015-10-04 Arfa

我不確定我是否正確理解你，但是你不能僅僅附加事件處理程序的底層div和定位在它上面嗎？

http://jsfiddle.net/o7pzb7je/

另外，如果是這樣的絕對定位div（#y），你可以調整你的HTML被放置較大的一個（#x），您可以將事件處理程序內到外div（#x）爲正常。

http://jsfiddle.net/6mnLfLu1/

來源

2015-10-04 23:17:31

是的，除了覆蓋層通常延伸到觸發區之外。此外，疊加層還有一個單獨的鼠標事件，通常我想限制prev/next按鈕的觸發。 – Arfa

@Arfa - 所以疊加層已經有一個鼠標事件，並且當底層div上的疊加層懸停時，您希望底層div觸發事件？疊加事件也會觸發嗎？ –

一天後...下面我測試了一個無邊界，透明的z-index：22 div，它觸發了鼠標事件;滾動我們的prev/next標籤。是的，理想情況下，我仍然可以解決 - 現在是底座。但是..雖然我現在有prev/next區域功能，但我失去了div區域。我也一直在考慮推出一個小型擴展指示器側欄，它可以展開上一頁/下一頁。無論哪種方式，它似乎選項卡將花費房地產:)感謝您的興趣。 – Arfa

帶位置的區域上的鼠標位置：絕對區域覆蓋區域

回答

相關問題