Question

请先花几秒钟看一下代码。我使用的是BS3。

HTML

<div class="my-div">
  <a href="#">A link</a>
</div>
<div class="cool-div">
 <p>bla and bla</p>
</div>

JS：

// Make PopOver stay while one mouseover on it
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

// Show User Details PoPOver 
$('.my-div').popover({
    trigger: 'hover', 
    placement: 'auto',
    html:true, 
    delay: {show: 50, hide: 400}, 
    content: function () {
            return $(this).next('.cool-div').html();
        }
});

// Make some custom styling on User Details PoPOver 
$(function () {
    $('.my-div').on('shown.bs.popover', function () {
        var $this = $(this),
            popover = $this.next('.popover');
            popover.find('.popover-content').css({padding: '5px 5px 8px 5px', 'margin-right':'-18px'});
    });
});

好的，我所做的就是让PopOver停留在第一段代码上的一个鼠标悬停，然后显示它和一些自定义样式。

现在，一切都很好但是在一些较小的分辨率下我有一个div，它是溢出：隐藏导致我的Popover被隐藏在其中。我增加 .popover 的z-index值，没有用。
我研究并尝试使用容器：＆＃39; body＆＃39; 或容器：＆＃39; my-div＆＃39; 以及数据 - 在html中，container =＆＃34; body＆＃34; 。

虽然它解决了这个问题，但是当鼠标悬停时，弹出窗口不会停留，而且css也没有连接。

我如何一起实现这三个目标？非常感谢。

Answer 1

你能否发布你的代码的完整样本，包括那个溢出的div：隐藏在它上面所以我可以看一下完整的问题。我不知道你把另一个div放在哪里所以现在有点难以解决：）

这里有一些非常不受欢迎的建议：）

我通常会将CSS添加（或切换）到我想要控制的元素，而不是向其添加CSS属性。所以而不是：

popover.find（'。popover-content'）。css（{padding：'5px 5px 8px 5px'，'margin-right'：' - 18px'}）;

我会用：

popover.find（ '酥料饼含量。'）addClass（ “styleme”）;

此致

Bootstrap 3 Popover隐藏在隐藏溢出的元素后面

1 个答案: