javascript - 如何在Javascript中更改悬停对象的颜色？

Question

我对 Javascript/Canvas 很陌生，我想创建一个动画，每当我在画布内单击时创建圆圈，然后当我将鼠标悬停在它们上时它会改变颜色，当鼠标没有悬停在它们上时它会恢复为原始颜色. 我能够在单击时创建绘制圆圈的动画，但无法使悬停颜色起作用。我正在尝试使用 Javascript 完全完成这项工作，仅使用 HTML 来创建画布。任何建议表示赞赏！

    let dots = [];

    /** @type {HTMLCanvasElement} */
    let canvas = ( /** @type {HTMLCanvasElement} */ document.getElementById("canvas"));
    let context = canvas.getContext('2d');

    //some state
    let mouseX = -10;
    let mouseY = -10;

    //remember mouse click position
    canvas.onclick = function (event) {
        mouseX = event.clientX;
        mouseY = event.clientY;

        let box = (event.target).getBoundingClientRect();
        mouseX -= box.left;
        mouseY -= box.top;
    };

    canvas.onmouseleave = function () {
        mouseX = -10;
        mouseY = -10;
    };

    var drawCirc = function (hover) {
        //clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        //determine mouse location when outside
        //if inwide canvas, make a dot
        if ((mouseX > 0) && (mouseY > 0)) {
            dots.push({
                "x": mouseX,
                "y": mouseY
            });
        }

        //draw circles/dots
        dots.forEach(function (d) {
            context.fillStyle = "#808080";
            context.beginPath();
            context.arc(d.x - 3, d.y - 3, 10, 0, 2 * Math.PI);
            context.fill();
        });
        window.requestAnimationFrame(drawCirc);
    }
    drawCirc();

canvas{
  border:1px solid black
}

<canvas id="canvas" width="200" height="200"></canvas>

标签： javascriptcanvas

Answer 1

你可以使用鼠标悬停方法

对于 jquery，这里是示例

$("p").mouseover(function(){
$("p").css("background-color", "yellow");
 });

对于 javascript

<script>
   document.getElementById("demo").addEventListener("mouseover", mouseOver);
   document.getElementById("demo").addEventListener("mouseout", mouseOut);

   function mouseOver() {
   document.getElementById("demo").style.color = "red";
   }

   function mouseOut() {
    document.getElementById("demo").style.color = "black";
    }
</script>