无法计算悬停元素的确切位置

我只是想根据周围的空间获得鼠标悬停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

无法计算悬停元素的确切位置

回答

相关问题