Question

我正在编写一个创建记忆游戏的代码。我需要这样做，以便当我的鼠标在一个块上时，它会将该块遮挡成不同的颜色。我在javascript中编写代码。每当我尝试某些东西时，只是说字符串不是一个功能。我在汗学院写作，代码是mouseOver =＆＃34; this.color =＆＃39; black＆＃39;＆＃34 ;;谁能帮帮我吗？

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();
}

Answer 1

一种解决方案可能是：

<div onmouseover="Color(this,'black')"></div>

function Color(obj, color){
   obj.style.background=color;
}

希望它有用！

Answer 2

您需要使用this.style.backround='color'代替this.color='color'。请尝试以下代码：

＆＃13;

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

＆＃13;

Answer 3

当您将代码内联时，它可能会变得混乱，因此提取它会有所帮助，如下所示：＆＃34;选择器＆＃34;是鼠标悬停动作上你想要变成黑色的div或class或id。

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

Answer 4

我通常将鼠标悬停等事件放在事件侦听器中，而不是放在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;
}

Answer 5

我假设您正在查看“Project:Memory++”页面，因此我将从那里开始工作。

如果你看一下上面绘制的函数，它叫做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.

在找到要着色的图块后，您需要编写一个函数来更改它，方法是更改图块显示的图像或给它叠加。在其他主题中有一些好主意，但我会坚持你在可汗学院的其他项目中给予的内容。

着色我的鼠标结束的块

5 个答案: