1

我需要创建一个基于 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');
});
4

1 回答 1

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');
    });

单击此处查看非常基本的示例 ​在 IE7-9、Firefox、Chrome 中测试

编辑：这是您的代码的工作示例

于 2012-11-07T13:37:21.873 回答