Question

我有一个滚动菜单（ul），当鼠标悬停在列表项上时，会创建一个悬停副本。当元素溢出时，此菜单有一个滚动条。由于悬停副本的顶部和左侧正好是列表项的内容，因此它会阻止菜单滚动。

这是我正在使用的代码，以及jsfiddle。小提琴的样式是如此使用，我将在下面发布代码以供快速参考

相关的Html （很多李会导致溢出）：

<div class='popup'>
    <div class="page">
        <div class="pagescroll">
            <ul>
                <li class="li-page">Hovering</li>

                ...

                <li class="li-page">Hovering</li>
            </ul>
        </div>
        <ul class="noteslist">
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
        </ul>
    </div>
</div>

Javascript：

PageHoverActions();

function PageHoverActions() {

    var fontAnimateTimer;
    //Adds hover
    $('.li-page').on('mouseover', function (e) {
        if (fontAnimateTimer) {
            window.clearInterval(fontAnimateTimer);
        }

        var el, hoverel, fontSize, rect;
        el = this;
        rect = el.getBoundingClientRect(); //rect alows us to position things beautifully
        fontSize = 12;


        $('.li-page-hover').remove();
        //hoverel is the hovering element
        hoverel = $(this)
            .clone()
            .addClass('li-page-hover')
            .css({
            'top': rect.top,
                'left': rect.left
        })
            .appendTo(document.body)
            .click(PageClickActions);
        //Magnifies text
        fontAnimateTimer = window.setInterval(function () {
            if (fontSize < 20) {
                hoverel[0].style.fontSize = fontSize + 'pt';
                fontSize++;
            } else {
                window.clearInterval(fontAnimateTimer);
            }
        }, 20);

    });


}

Answer 1

您可以在css中使用类似pointer-events的内容。

.li-page-hover {
    pointer-events: none;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

http://caniuse.com/pointer-events

修改如果你想更进一步，这也值得一看：

https://github.com/polymer/PointerEvents

Answer 2

您可以将其添加到您的页面：

.li-page-hover {
    pointer-events: none;
    cursor: pointer; /* if you want to keep your cursor as a pointer */
}

元素阻止滚动事件

2 个答案: