css 当鼠标按下并悬停时，使div的背景色发生变化

gkl3eglg 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(126)

当鼠标悬停在一个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上拖动鼠标时，它们没有变化。光标只是变成一个红色的圆圈-反斜杠符号。
我试着添加一个事件（如上面的代码所示），如果元素被移动，但只有当鼠标按下时，它才会将背景色转换为黑色。
哦，我只想使用普通的js，而不是jQuery或任何其他扩展。

css

来源：https://stackoverflow.com/questions/75142612/make-the-background-color-of-div-change-when-the-mouse-is-down-and-hovering

2条答案

按热度按时间

mspsb9vt1#

我尝试使用下面的脚本。它在我这边工作

<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>

赞(0）回复(0）举报 2023-01-18

jhdbpxl92#

比上面的代码更简洁一些：

<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>

赞(0）回复(0）举报 2023-01-18

我来回答

css 当鼠标按下并悬停时，使div的背景色发生变化

2条答案

相关问题

热门标签

最新问答