無法計算懸停元素的確切位置

我只是想根據周圍的空間獲得鼠標懸停div的位置。不知何故，我能夠在前兩列做到這一點，但不能用於其他列。可能是我寫的條件狀態寫錯了。無法計算懸停元素的確切位置

任何人都可以請幫忙嗎？

JS小提琴網址：

http://jsfiddle.net/mufeedahmad/2u1zr11f/7/

JS代碼：

$('.thumb-over-team li').find('.cover').css({opacity:0}); 

     $('.thumb-over-team li').on('mouseenter', function(){  

       var $this = $(this), 
        thisoffset = $this.position().left, 
        openDivId = $(this).find('.cover'), 
        thumbContainer = '.thumb-over-team', 
        speedanim = 200; 


       if(thisoffset + openDivId.outerWidth() >= $(thumbContainer).outerWidth()){ 
        //thisoffset = $(thumbContainer).outerWidth() - openDivId.outerWidth() - 212; 
        thisoffset = thisoffset - openDivId.outerWidth()+10;      
        openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':-thisoffset}, 200); 
        }else{      
         openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':'212px'}, 200); 
        } 






     }).on('mouseleave', function(){   
      $(this).find('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200); 

     }); 

     $('.close-parent').on('click', function(){   
      $(this).parents('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200); 

     });;

來源

2015-08-09 Mufeed Ahmad

你正在試圖做什麼的還不清楚的內蓋，什麼是理想的結果？如果你看看你的帖子標題：'無法計算懸停元素的確切位置' - 答案很簡單，使用'on（'hover'，function ...'event或'hover（）'函數並檢查 – odedta

看起來'.cover'在'.thumb-over-team'裏面，所以這個可擴展的方塊（'.cover'）將它的寬度加到容器的總寬度上（'.thumb-over-團隊「），因此你的條件」認爲「'。cover'仍然可以放在'.thumb-over-team'的寬度內，如'（$（thumbContainer）.outerWidth（））所計算' –

在你的第一個條件，嘗試計算的偏移量的位置：

thisoffset = ($(thumbContainer).outerWidth() - openDivId.outerWidth() - thisoffset);

那方式，當它不適合時，你正在調整出現的方塊（.cover）在容器內，要儘可能接近它的最右邊：這樣計算（最大寬度 - - 出現多寬電流I位置）

，您可以用新的正偏移設置動畫：

openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':thisoffset}, 200);

看到它的工作here。

對於「幾乎」適合的元素，由於我之前的評論中已經指出的內容，目前的系統並不完全精確：即使在不透明度爲0的情況下，出現的方塊仍然會位於包含元素（($(thumbContainer))或.），並將其寬度添加到容器的總寬度。

因此，您的條件可能會認爲容器中有足夠的可用空間來使可展開元素合適，但是這會超出屏幕。作爲一個例子，請注意，從一開始就有一個水平滾動條，由此效應引起，其中包含.thumb-over-team元素不適合屏幕。

但我要說的是，在這一點上更精確就需要一個全新的方法來你的系統中出現的.cover要素是出含有UL .thumb-over-team

來源

2015-08-09 14:25:16

我真的很感激你耐心和回答然而它並沒有解決問題，但我很高興有這個建議，並會做一些工作。非常感謝:) –

勁取上的問題，本質上是基於主問題：用於將其寬度添加到容器（.thumb-over-team）的可展開文本塊（.cover）。這改變了可用容器空間的計算，並使文本容器脫離屏幕。

解決方法是確保可擴展的.cover元素不包含在.thumb-over-team元素內，因此它們不會影響可用寬度的計算。

這是一個包含這種新方法的JSFiddle：link。

解釋它是如何工作：

當時的想法是創建一個名爲.cover-container一個單獨的元素，讓我們把所有的擴張.cover元素在裏面。

我們希望每一個圖像中的li元素.thumb-over-team與他們適當.cover（所以第一個圖像觸發第一.cover顯示，第二圖像將顯示第二蓋，等等。）我們實現的是通過關聯找出元素的索引觸發事件：

thisLiIndex = $this.index() + 1

然後在匹配位置選擇所述蓋：

openDivId = $('.cover-container .cover:nth-child(' + thisLiIndex + ')')

的expanda BLE蓋不應該的.thumb-over-team的mouseenter或mouseleave事件干擾，所以我們將其忽略通過CSS的鼠標事件：

.cover-container{pointer-events:none;}

從一個圖像改變成另一個會自動觸發新的事件，所以擴大覆蓋住當鼠標停留在圖像上時可見，但當鼠標退出時會自動關閉。

由於封面現在在$(thumbContainer)之外，因此openDivID.outerWidth()不會改變$(thumbContainer).outerWidth()，我們可以在我們的定位中安全地使用它。

如果我知道你想要的，爲適合蓋的位置，該位置是在當前偏移量（即觸發事件的li元素的位置），再加上圖像的寬度和一些細微的保證金

imageWidth + rightSeparation + thisoffset

而對於，將不適合在屏幕上，我們讓他們剛內屏幕

thisoffset = $(thumbContainer).outerWidth() - openDivId.outerWidth();

來源

2015-08-10 16:50:37

無法計算懸停元素的確切位置

回答

相關問題