根据容器尺寸悬停方向

Question

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

详见小提琴：

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

我使用hoverIntent，但上面的小提琴上有完整的详细信息：

            $(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可以提供工具提示+宽度并直接将其与支架宽度进行比较。 （动态）

这取决于你想要的......

这是唯一添加的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