我想根据容器大小改变悬停方向,如果容器上没有足够的空间来显示右侧的悬停,它应该显示在左侧。
详情见 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);}
最佳答案
有几种方法。
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; }
关于javascript - 悬停方向根据容器大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20023395/