Question

我正在使用wookmark插件，并让它在他们的网站上展示时起作用。在我的用例中，当我将鼠标悬停在特定元素上时，它会“垂直”展开。这显然会混淆该列中扩展元素下方元素的绝对位置。我正在尝试修改/扩充wookmark插件以处理我的用例，并且想知道是否有人有关于我如何处理这个问题的一些提示。

感谢。

Answer 1

我无论如何都不是jQuery专家，但我有一个建议。

在元素鼠标悬停时，创建一个位于原始顶部之上的新div。这显然需要修改以适应您的“扩展”要求。我不确定你要扩展到什么尺寸，或者如果你动画它 - 所以我创建了新的div与本例中的原始尺寸相同。

使用此方法会将原始框保留在原始框中，但会覆盖相同大小且位于相同位置的新框，而不会影响其余框。

<script>
$(document).ready(function(e) {
    $('#theHoverElement').mouseenter(function() {

        // on mouseover, get offset values and sizes
        var offset = $(this).offset();
        var top = offset.top();
        var left = offset.left();
        var height = $(this).height();
        var width = $(this).width();

        // create a new div element with the same values
        $("#mainPageContainer").append("<div style='position:absolute; top:"+top+"; left:"+left+"; width:"+width+"; height:"+height+"; z-index:10000;'>Hello World!</div>")

        // here you could put an expanding function
        $(this).animate({ // some height & width properties }, 600);
    });
});
</script>

正如我所说，我不是jQuery专家，所以这可能不会立即起作用，但可以提供帮助。

在动态改变元素高度的同时使用jquery wookmark插件

1 个答案: