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

Question

我只是想根据周围的空间在右侧将鼠标悬停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);

        });;

Answer 1

在第一个条件中，尝试按以下方式计算偏移量的位置：

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

这样，您正在调整出现的正方形（.cover）使其不适合容器内部时，使其尽可能靠近其最右边：（最大宽度-出现的正方形宽度-当前li位置）

通过这种方式计算，您可以使用正的新偏移量对其进行动画处理：

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

看到它在这里工作。

对于“几乎”适合的元素，由于我在之前的评论中已经指出，当前系统并不完全精确：出现的正方形，即使它的不透明度为0，仍会在包含元素（ ($(thumbContainer))或($(thumbContainer)) thumb-over-team ），则会将其宽度添加到容器的总宽度中。

因此，您的条件可能会认为容器中有足够的可用空间来使可扩展元素合适，但这将超出屏幕范围。 例如，请注意，由于这种效果，从一开始就有一个水平滚动条，其中包含的.thumb-over-team元素不适合屏幕。

但是我要说的是，在这一点上要提高精度，需要对您的系统采用一种全新的方法，其中出现的.cover元素不在包含的ul .thumb-over-team

Answer 2

基本上基于以下主要问题对问题进行了.cover ：可扩展文本块（ .cover ），用于将其宽度添加到容器（ .thumb-over-team ）。 这改变了对可用容器空间的计算，并使文本容器不在屏幕上。

解决方案是确保可扩展.cover元素未包含在.thumb-over-team元素内，因此它们不会影响可用宽度上的计算。

这是一个包含这种新方法的JSFiddle： link 。

解释其工作原理：

这个想法是创建一个单独的名为.cover-container的元素，然后将所有可扩展的.cover元素放在其中。

我们希望将.thumb-over-team的li元素中的每个图像与其相应的.cover （因此第一个图像触发显示的第一个.cover ，第二个图像将显示第二个封面，依此类推。）通过找出触发事件的元素的索引来实现：

thisLiIndex = $this.index() + 1

然后选择匹配位置的封面：

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

可膨胀的盖子不应与干扰mouseenter或mouseleave的事件.thumb-over-team ，所以我们将其忽略通过CSS的鼠标事件：

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

从一幅图像更改为另一幅图像会自动触发新事件，因此，当鼠标停留在图像上时，展开的封面将保持可见状态，但是当鼠标退出图像时，它们将自动关闭。

由于封面现在位于$(thumbContainer) ，因此openDivID.outerWidth()不会更改$(thumbContainer).outerWidth() ，我们可以在定位中安全地使用它。

如果我了解所需的位置，对于适合的封面，该位置是当前偏移量（触发事件的li元素的位置）加上图像的宽度和一些微妙的边距

imageWidth + rightSeparation + thisoffset

对于无法容纳在屏幕内部的保护套，我们将其保留在屏幕内部

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