Javascript 文本在悬停时淡入，背景变暗

演示：

页面源中的所有html/css

我正在为我妈妈制作一个网站，我试图隐藏.1.2和.3 div上的文本，直到鼠标悬停在上面。我试图使背景淡入rgba（0,0,0,0.6）的悬停状态。我对javascript也不是很熟练。有人知道我该怎么做吗

---

/编辑-我希望文本从背景淡入，抱歉造成混乱/

您不希望使用javascript进行此操作。请按以下方式修改您的类

.one {
   text-indent:-9999px;
}


.one:hover {
   text-indent:0;
}

---

对于褪色文本，请执行以下操作：

.one section{
    transition: opacity 1s;
    height: 100%;
}
.one section:hover{
    opacity: 0;
}

要同时淡入背景和文本，请尝试以下代码段：

我根据你的代码做了一个简单的例子。您需要做的唯一更改是在“one”-div周围添加“one_wrapper”div

---

阅读更多有关

的信息我喜欢你的想法，但是否有任何方法可以使过渡顺利？也许它可以淡入淡出而不是跳跃？