艺术项目的遮光文本

Question

我想为 class 制作一首互动停电诗。 This is a blackout poem btw，当我检查元素时，我可以看到它们有一个 {。停电编辑器风格。这是我可以借的东西吗？

我已经完成了 HTML 和 CSS 文本和 link 样式的 W3 Schools 基本教程，但我找不到任何符合我要求的方法. 我想使用标准文本，并且当用户单击它时每个单词 "blackout" 最终结果是用户只能在屏幕上看到未涂黑的单词。

有什么想法吗？ TIA，我对编码很陌生。

Answer 1

示例：

<span>Here </span>
<span>are </span>
<span>some </span>
<span>words </span>
<span>for </span>
<span>a </span>
<span>poem </span>

<script>
    $("span").on("click", function() {
        $(this).css("background", "black");
    }); 
</script>

<style>
    span {
      cursor:pointer;
    }
</style>

在行动：https://jsfiddle.net/kylemartin/f16okqsq/

当然，我的示例没有 un-do 中断的机制，但这就像检查 span 的背景颜色以及它是否是黑色，那就让它不黑。

我认为这可以满足您的需求。如果没有，请告诉我，我可以改进它。虽然有点丑，但是达到目的了

这段代码的作用：

我们所做的是将所有单词放入它们自己的  中。我们需要这样每个单词都是可以点击的 "unit"。然后我们创建我们的 Javascript 点击处理程序来侦听对  之一的任何点击。当有人点击其中一个  时，我们将  的背景颜色更改为黑色。我刚刚添加了 CSS 以备不时之需。顺便说一句，CSS <style> 标签应该放在 HTML 文件的 <head> 中（或在外部样式表中）。

这段代码的问题：

显然，这有一个主要问题——您不能 "unhighlight" 单词。然而，这就像在您的点击处理程序中添加一个 if 语句一样简单，该语句检查被点击的  的背景颜色。如果  没有背景，则将其设为黑色。如果  有黑色背景，请移除背景。我会让你自己弄清楚那部分。 :)（很好的学习经验）

艺术项目的遮光文本

Blackout text for an art project

html

css

styling