使用 Javascript 使文本在代码中消失时出现问题答案

【问题标题】：Trouble making text disappear in code using Javascript使用 Javascript 使文本在代码中消失时出现问题
【发布时间】：2021-07-21 19:55:56
【问题描述】：

我只是想在鼠标悬停在精灵上时让文本消失，但它不会那样做。我已经尝试了很多东西 - 把 text(A/B).visible = true;在 else 语句中。我已经在我的程序中几乎所有地方移动了我的文本代码。它不会消失。

var alien = createSprite(100, 200);
alien.setAnimation("alienYellow_jump_1");
var bubble = createSprite(225, 250);
bubble.setAnimation("comictextbubble.png_1");
var button = createSprite(105, 275);
button.setAnimation("play_1");
function draw() {
  background("lightblue");
  if (mouseIsOver(alien)){
    alien.rotation = randomNumber(10, -10);
  }
  button.visible = false;
  if (mouseIsOver(button)){
    button.visible = true;
  }
  if (mousePressedOver(button)){
    bubble.visible = false;
  }
  drawSprites();
  stroke("black");
  textSize(20);
  var textA = text("Find the secret button to reveal your card!", 10, 207);
  var textB = text("It's your birthday!", 115, 150);
  if (mouseIsOver(button)){
    textB.visible = false;
    textA.visible = false;
  }
  console.log(textA.visible);
  console.log(textB.visible);
}```

【问题讨论】：

我还添加了一个控制台日志来检查程序是否真正识别出 if 语句想要做什么，你瞧，它确实识别出每当将鼠标悬停在按钮上时，可见性应该是成为“假”。但它仍然没有改变。
欢迎来到 Stack Overflow！欢迎来到堆栈溢出！访问help center，使用tour 了解内容和How to Ask。如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
如果这是 P5。请标记它。要阅读的页面是studio.code.org/docs/gamelab/visible
@mplungjan 可见标签和不可见标签通常是干什么用的？
@jperl 如果我们将鼠标悬停在它们上面，它们是非常通用的，而不是特定框架或浏览器方法的一部分

标签： javascript visibility p5.js visible invisible

【解决方案1】：

我认为这是因为当鼠标悬停在精灵上方时，顶部语句将可见性设置为 true，从而阻止底部语句正常工作。尝试添加else 语句，如下所示：

      if (mouseIsOver(button)){
    button.visible = true;
  } else if (mousePressedOver(button)){
    bubble.visible = false;
  }

如果这不起作用，请确保可见性函数实际上使精灵不可见。

【讨论】：

【解决方案2】：

你有没有试过，如果你把鼠标移到精灵上，文字的填充颜色变成透明的，如果你把填充函数的第4个参数设置为255，那么它就是透明的。

    function draw(){

     var Red = 255;
    var Blue = 255;
    var Green = 255;
    var Alpha = 0;
    fill(Red,Green,Blue,Alpha);
    text("Move mouse over me to disappear",200,200);
    if(mouseX>175&&mouseX<225&&mouseY>175&&mouseY<225)
        {
    Alpha=255;
        }

    }

【讨论】：