光标位置到CSS网格位置

问题描述 投票：0回答：1

我有一个CSS网格布局，希望将单元格位置放在光标下方。想象下面的例子：

enter image description here

如果光标位于图像中的星星所在的位置，我正在寻找一个返回{grid-row-start: 2, grid-row-end: 3, grid-column-start: 5, grid-column-end: 6}的JavaScript函数。

你们每个人都知道执行此操作的本机功能吗？还是我必须自己计算值？谢谢：）

我的示例代码如下：

<html>
    <head>
        <style>
            .container {
                display: grid;
                grid-gap: 10px;
                background-color: blue;
                grid-template-columns: repeat(6, 1fr);
                height: 400px;
            }
            .container div {
                background-color: green;
            }
            .grid-stack-item {
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="1">
                <div class="grid-stack-item-content">1</div>
            </div>
            <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="2">
                <div class="grid-stack-item-content">2</div>
            </div>
            <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content" style="overflow: hidden">3</div>
            </div>
            <div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content"> 4</div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">5</div>
            </div>
            <div class="grid-stack-item" data-gs-x="1" data-gs-y="1" data-gs-width="1" data-gs-height="2">
                <div class="grid-stack-item-content">6</div>
            </div>

            <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">8</div>
            </div>
            <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="1">
                <div class="grid-stack-item-content">9</div>
            </div>
            <div class="grid-stack-item" data-gs-x="4" data-gs-y="2" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">10</div>
            </div>
            <div class="grid-stack-item" data-gs-x="5" data-gs-y="2" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">11</div>
            </div>
        </div>
    <script>
        for(let elm of document.getElementsByClassName('grid-stack-item')){
            elm.style['grid-column-start'] = parseInt(elm.getAttribute('data-gs-x')) + 1;
            elm.style['grid-column-end'] = parseInt(elm.getAttribute('data-gs-x')) + parseInt(elm.getAttribute('data-gs-width')) + 1;
            elm.style['grid-row-start'] = parseInt(elm.getAttribute('data-gs-y')) +1 ;
            elm.style['grid-row-end'] = parseInt(elm.getAttribute('data-gs-y')) + parseInt(elm.getAttribute('data-gs-height')) +1;
        }
    </script>
    </body>

</html>

我有一个CSS网格布局，希望将单元格位置放在光标下方。想象以下示例：如果光标位于图像中的星星所在的位置，那么我正在寻找一个JavaScript函数，该函数......>

javascript css css-grid
1个回答
1
投票

您要做的是找出鼠标悬停在哪个元素上，然后从该元素获取window.getComputedStyle(element).gridColumnStart（及其他）。

最简单的方法是将mouseenter事件添加到每个grid-stack-item元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.