当鼠标按下并悬停时，使 div 的背景颜色改变

Question

当鼠标按下并悬停时，使 div 的背景颜色改变

3

当鼠标悬停在 div 上并且一直按住鼠标时，我希望更改 div 的背景颜色。

代码：

<style>
    #container{
        margin: auto;
        margin-top: 20px;
        height: 200px;
        width: 200px;
        background-color: aquamarine;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
</style>
<body>
    <div id="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

    <script>
        let cells=Array.from(document.getElementsByClassName('cell'));
        cells.forEach(cell => {
            cell.onmouseover = () => {
                cell.onmousedown = () => {
                    cell.style.backgroundColor="black";
                }
            }
        });
    </script>

问题在于第一次点击后，div 只会变成黑色。当鼠标保持按下状态并拖动到其他 div 上时，其他的 div 没有任何变化。光标只是变成了一个红色的圆形斜杠符号。

我尝试添加了一个事件（如上面的代码所示），当元素被移动但仅当鼠标按下时，它将背景颜色转换为黑色。

哦，我想只使用原生 JS，不使用 jQuery 或任何其他扩展。

- Mostack

2个回答

1

比上面的代码更简洁：

以下是需要翻译的内容：

<script>
    const cells = Array.from(document.getElementsByClassName('cell'));
    var flag = false; //Here, I think it should be var, not let.
    
    window.onmouseup = () => { flag = false; }

    cells.forEach(cell => {
        cell.onmouseover = () => { if(flag) cell.style.backgroundColor="black"; }
        cell.onmousedown = () => { cell.style.backgroundColor="black"; flag = true; }                  
    });
</script>

- Phillip

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle Moore · Accepted Answer

请尝试以下脚本。它在我的电脑上可以运行。

<script>
            let cells=Array.from(document.getElementsByClassName('cell'));

            let flag = false;
            
            window.onmouseup = () => {                        
                flag = false;
            }
            cells.forEach(cell => {
                cell.onmouseover = () => {
                    if(flag == true)
                    {
                        cell.style.backgroundColor="black";
                    }
                    cell.onmousedown = () => {
                        cell.style.backgroundColor="black";
                        flag = true;
                    }                  

                    
                }
            });
        </script>