Html css通过单击将文本从一个类更改为另一个类

我正在编写一个词汇表，解释性文本在关键字后面不可见，在

{visibility:hidden；opacity:0；}

中不可见，但我注意到关键字在任何浏览器中都是隐藏的

我还了解到隐藏文本对html读者没有好处，所以残疾人不能使用这个词汇表。因此，用户无法搜索和查找，盲人也无法从中获益。总而言之，没什么好处

所以我想做的是：相同的关键字

div

，解释性文本以非常小的字体放在一边，与背景颜色相同，带有

overflow:hidden

，当我点击该关键字时，（片刻之前）无法阅读的文本弹出在AllGlory中。但我不喜欢将解释性文本保留两次，即一次隐藏，一次准备弹出。 怎么做

因此，只要单击关键字，类的属性就会从一个类更改为另一个类？可以这样做吗

下面是我的一个条目示例（x类用于关闭弹出窗口）：

CSS:

HTML:

---

Ahti

（Fins）水之神，一个水之神，一个水之神；zijn vrouw Vellamo。我是naam van Lemminkaïnen，在德卡莱瓦拉的德拉克·范·肯尼斯·沃德·热内姆。我不完全理解你的问题。当你点击“Ahti”这个词时，你想改变一个类吗？或者你想要什么？或者你的意思是你不想让文本在HTML中准备好，但它必须在弹出窗口显示时生成？在这种情况下，可以使用javascript html（）；是的，当一个人点击Ahti时，Ahti和描述在一种弹出窗口中变得可见，就像现在一样。但和现在不同的是，它具有可见性：隐藏，只是改变字体大小和颜色。我还没有弄明白如何用css实现这样的转换。也许我需要JS，但因为我根本不是程序员，所以我不得不询问和乞求，看看你们能帮我些什么。谢谢你，如果我为你做了一把小提琴。请检查这是否是你的意思。当有人单击“Ahti”时会添加描述，当他们单击“x”时会删除描述。很好的工作，但是我们仍然使用不可见的文本，这被html读者忽略了。我现在正在研究这个页面，但找不到切换的方法，也找不到如何找到找到后打开的结果。也许我应该忽略html阅读器，我会在数据库准备好后发布pdf，但也许你可以帮助我如何在不可见文本中使用javascript进行搜索？那将是一个很好的解决办法。也许干脆跳过这一步，把注意力集中在大部分看不见的文本中的“搜索”上？你说的HTML阅读器是什么意思？另外，你所说的搜索“不可见文本”是什么意思？这是您使用

可见性：hidden

使其不可见的HTML代码吗？如果是这样，该文本仍然存在，并且应该可以使用jQuery进行搜索：

var-wantedText=$（“div:contains（Ahti）”）

；

.w { font-size: .75em;
     line-height:1.2em; 
     height:27px;
     background-color:#f2f3f4;
     margin-right:2px;
     margin-bottom:6px;
     outline:0px; 
     cursor:pointer;
     padding:7px;
     width:170px;
     display:inline-block;
     vertical-align: middle; 
     text-align:left; 
     border: .5px solid #f2f3f4; 
     }
.ov {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
     transition: opacity 1000ms;
     visibility: hidden;
     opacity: 0;
     }
.ov:target { 
     visibility:visible;
     opacity: 1;
     }
.tt {
     position:absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 33px;
     padding-left:40px;
     background: #fff;
     border-radius: 10px;
     width: 70%;
     height:auto;
     max-height:80%;
     transition: all 1s ease-in-out;
     font-family: "basr"; 
     font-size:.85em; 
     line-height:1.5em; 
     text-align:left; 
     outline:0px; 
     overflow:auto;
     }
 .x { 
     cursor:pointer; 
     position: absolute;
     top: 8px;
     right: 13px;
     font-size: 15px;
     font-family:"arial";
     text-decoration: none;
     }
  p3 {
     font-family:"chunk";
     font-size:2em;
     color:#c33;
     margin-right:.5em;
     margin-left:-.5em;
     vertical-align:4px;
     line-height:1.4em;
     }