遮盖我的鼠标已结束的块

Shading a block that my mouse is over

本文关键字：结束 鼠标 我的      更新时间：2023-09-26

我正在编写一个创建记忆游戏的代码。我需要这样做，以便当我的鼠标悬停在一个块上时，它会将该块着色为不同的颜色。我正在用javascript编写代码。每当我尝试某事时，只是说字符串不是一个函数。我在可汗学院写作，代码是mouseOver="this.color='black'";谁能帮我？

draw = function() {
if (delayStartFC && (frameCount - delayStartFC) > 30) {
    for (var i = 0; i < tiles.length; i++) {
        if (!tiles[i].isMatch) {
            tiles[i].drawFaceDown();
        }
    }
    flippedTiles = [];
    delayStartFC = null;
    // commented no loop because the timer stops working if this is enabled.
    mouseOver="this.color='black';" 
    // noLoop();
}
您需要

使用 this.style.backround='color' 而不是 this.color='color' 。 尝试以下代码：

<div style="background:red;" onmouseover="this.style.background='blue';" onmouseout="this.style.background='red'">Content</div>

当您将代码内联时，它可能会变得混乱，因此提取它会很有帮助，如下所示："选择器"是您希望在鼠标悬停操作上变黑的任何div 或类或 id。

$('selector').hover(function() {
    $(this).css('background-color', 'black');
});

一种解决方案可能是：

<div onmouseover="Color(this,'black')"></div>
function Color(obj, color){
   obj.style.background=color;
}

希望有用！

我假设您正在查看"Project：Memory++"页面，所以我将从那里开始工作。

如果你看一下上面的 draw 函数，它叫做 mouseClicked，你会注意到它有一种方法可以检查一张卡是否在鼠标下方：

 mouseClicked = function() {
     for (var i = 0; i < tiles.length; i++) {
         if (tiles[i].isUnderMouse(mouseX, mouseY)) { //this line designates a tile under the mouse
         // draw the tile, tiles[i], with a color over it.

找到要着色的磁贴后，需要编写一个函数来更改它，方法是更改磁贴显示的图像或为其提供叠加层。在其他线程中有一些好主意，但我会坚持您在可汗学院的其他项目中得到的内容。

我通常将鼠标悬停等事件放在事件侦听器中，而不是放在 HTML 鼠标悬停属性中。如果你想用纯JavaScript来做这件事，试试这个：

document.getElementById("test").addEventListener("mouseover",function(e){e.target.style.backgroundColor = "#000";});
document.getElementById("test").addEventListener("mouseout",function(e){e.target.style.backgroundColor = "#FFF";});

你也可以用CSS来完成这个：

#test {
background-color: #FFF;
}
#test:hover {
background-color: #000;
}
相关文章：