javascript - 悬停方向根据容器大小

Question

我想根据容器大小改变悬停方向，如果容器上没有足够的空间来显示右侧的悬停，它应该显示在左侧。

详情见 fiddle :

http://jsfiddle.net/jHgkp/3/

我使用 hoverIntent，但完整的细节在上面的 fiddle 上:

            $(document).ready(function(){
                $(".discover").hoverIntent({
                over: makeVisible,
                out: makeInvisible,
                timeout: 200
                });
            }); // close document.ready

            function makeVisible() {
            $(this).find('ul').fadeIn(100);}
            function makeInvisible() {
            $(this).find('ul').fadeOut(300);}

Answer 1

有几种方法。

1) 您可以在第三个元素上设置工具提示样式以显示在左侧(不是动态的)

2) 您可以将元素 offest().left + element.width + 工具提示宽度与支架宽度进行比较。 (动态)

3) Yo 可以使用工具提示 offest + width 并将其直接与支架宽度进行比较。 (动态)

这取决于你到底想要什么......

这是唯一添加的 JS。

var holderWidth = $('.container').outerWidth();

和

//where 260 is left 150 + width 110
var pos = $(this).offset().left + 260
if(holderWidth < pos){
    $(this).addClass('leftPos');
}else{
    $(this).removeClass('leftPos');
}

和 1 行 css:

.leftPos ul { left: auto; right: 150px; }

Demo