我正在创建一个学习日语单词的页面.每个词都在这样的句子中被上下文化.

写一封信给一个人的家庭.

我制作它是为了让我只能看到这个词的拼音阅读,这样人们就可以训练用象形文字写这个词.上面的句子是这样的.

写一封信给一个人的家庭.

现在我希望能够点击这是我迄今为止写的CSS和HTML.

CSS

x { display: none; }

HTML

<x>故郷</x><y>こきょう</y>に手紙を出す write home to one's family

如果我点击这个词,我基本上想在y { display: none; }x { display: none; }之间切换.

我可以纯粹使用CSS和HTML来实现这一点吗?还是需要JavaScript?

我认为如果我在页面上隐藏了ALL <x><y>,在两者之间切换并不难,但我不喜欢这个结果.我正在寻找一种仅在点击单词的<x><y>之间切换的方法.

由于页面上有数百/数千个句子,因此 for each 单词使用不同的ID或类来针对特定单词是不切实际的.

我发现的所有解决方案都涉及为特定标签使用ID,或者同时切换所有标签,但我不知道如何实现这一点.

推荐答案

您熟悉复选框黑客吗?这可以通过单个复选框和标签内的两个单词上下文非常简单地完成.像这样:

[type=checkbox]:checked+span {
  display:none;
}
[type=checkbox]:not(:checked)+span+span {
  display:none;
}
[type=checkbox] {
  display:none;
}
  <label>
    <input type=checkbox>
    <span>故郷</span>
    <span>こきょう</span>
  </label>に手紙を出す write home to one's family

Html相关问答推荐

在Apps Script中连接CSS与HTML

R-markdown中的非顺序列表

如何在用css使用网格视图时设置宽度?

assets资源 净值元素不会扩展到涵盖子项

需要帮助创建一个简单的html css网格布局

Div中的图像问题-(TailWind CSS中的网格)

如何在HTML中适当地为单选按钮网格添加标签?

如何创建嵌套的动态表单元素

如何使背景图像在面包屑中相互重叠

如何在CSS中延迟触发2个转换?

rvest: Select 不包含链接的段落(<;p>;)

在span中添加

使用 Thymeleaf 将图像水平居中

如何将内容放置在侧边栏旁边?

模拟另一个输入值设置表单输入的数值

如何在div中设计伪元素?

是否可以将文本添加到表格边框?

当我将鼠标悬停在测试类上时,左侧类的 colored颜色 没有改变

当我希望它只横向滚动时,可滚动菜单也会上下移动