带有溢出-y的jQuery轮播显示容器外的弹出窗口答案

【问题标题】：jQuery carousel with overflow-y to show popup outside of container带有溢出-y的jQuery轮播显示容器外的弹出窗口
【发布时间】：2012-11-08 19:52:56
【问题描述】：

我需要创建一个基于 jQuery 的轮播。将鼠标悬停在轮播项目上时，它应该会在其上方弹出一个相关的弹出 div。

这个弹出 div 需要定位到显示在轮播包装之外，但仍保持悬停的轮播项目上方沿 x 轴的位置。因此，我将弹出 div 放置在轮播项目内，这样它就可以在 CSS 中使用负顶部属性绝对定位，但相对于轮播项目。

我遇到了一个问题，溢出：隐藏需要应用于轮播，因此它不会在页面加载时显示所有轮播项目，但是当它需要出现在悬停时，这会切断弹出 div。

在轮播包装器上的 CSS 中，我尝试过使用以下内容，但这并没有奏效，它最终表现得像溢出：隐藏

overflow-x: hidden;
overflow-y: auto;

或

overflow-x: hidden;
overflow-y: visible;

我提供了一个使用 caroufredsel 插件的 JSFiddle 示例。在这个例子中，为了清楚起见，我让示例弹出 div 始终可见，而不是悬停。您可以看到文本，并且红色 div 的顶部被切断。

http://jsfiddle.net/melon/jRp2r/9/

想到的一个解决方案是在轮播包装器之外标记弹出 div，这将解决它被切断的问题。但随之而来的问题是确定相对于悬停的轮播项目以及悬停的项目在哪里定位/显示它。在我走这条路之前，我想看看是否还有其他想法，也许是更好的想法。

如果有人可以给我任何方向来实现我所概述的目标，无论是通过 CSS 还是一些自定义 JS 都很棒。

感谢期待。

更新：

公认的解决方案是，如果轮播位于页面中间，则在滚动页面时弹出 div 将不会沿 Y 轴保持在同一位置。

我已将我的初始解决方案与接受的答案合并。我在轮播之外创建了一个单独的 div，我将用悬停的轮播项目的弹出 HTML 填充它。然后我会使用 Jquery 来完全重新定位它。以下代码示例解决了我的问题，例如：

$('.carousel_item').mouseenter(function() {
   var $this = $(this);
   var posLeft = ($this.offset().left);
   var posTop = ($this.offset().top);

   //Pop up height
   var popHeight = ($('.popup', this).height());

   //Turn into negative number
   posTop = Math.abs(popHeight) * -1;;

   var popup_html = $('.popup', $this).html();

   $('#outside_popup').html(popup_html).css({
       top: posTop,
       left: posLeft
   }).fadeIn('fast');

}).mouseleave(function() {
     $('#outside_popup').fadeOut('fast');
});

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

我自己也曾做过类似的事情。我相信这里有人会想出更好的解决方案，但我就是这样做的：

用幻灯片嵌套您的弹出窗口：

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

鼠标悬停时，获取幻灯片的位置。设置弹出窗口相对于悬停幻灯片的位置。 position: fixed; 是这里的关键。然后让它出现：

$('.slide').mouseenter(function() {
    var $this = $(this);
    var posLeft = ($this.offset().left)-10
    var posTop = ($this.offset().top)-10
    $('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
                           }).fadeIn('fast');

    }).mouseleave(function() {
        $('.popup', this).fadeOut('fast');
    });

Click here for a VERY basic example 在 IE7-9、Firefox、Chrome 中测试

编辑：Here is a working example of your code

【讨论】：