Question

我只是试图让鼠标根据周围的空间悬停在右边的位置。不知何故，我能够在前两列中执行此操作，但不能用于其他列。写条件状态可能是我的计算错误。

有人可以帮忙吗？

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），使其尽可能靠近它的最右边:(最大宽度 - 出现方形宽度 - 当前李位置）

通过这种方式计算，您可以使用正偏移的新偏移量为其设置动画：

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

看到它正常工作here。

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

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

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

中

Answer 2

新问题，主要基于主要问题：用于将宽度添加到容器（.cover）的可扩展文本块（.thumb-over-team）。这改变了可用容器空间的计算，并使文本容器脱离屏幕。

解决方案是确保.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 + ')')

可展开的封面不应该干扰mouseenter的{{1}}或mouseleave事件，因此我们通过CSS忽略鼠标事件：

.thumb-over-team

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

由于封面现在位于.cover-container{pointer-events:none;}之外，$(thumbContainer)不会改变openDivID.outerWidth()，我们可以安全地使用它。

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

$(thumbContainer).outerWidth()

对于不适合屏幕内部的封面，我们将它们放在屏幕内部

imageWidth + rightSeparation + thisoffset

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

2 个答案: