通过html隐藏密码

Question

当用户没有直接将鼠标悬停在密码上时，我试图使密码不可见。当他们悬停时，应该出现文本。我目前的代码如下所示，但我不能让悬停正确工作。它要么完全消失，要么保持不变。

<style>
#pass.a{
    visibility:hidden;
}
#pass.a:hover{
    visibility:visible;
    }
</style>
<table>
<tr>
    <td id="pass"><a> Password </a></td>
</tr>
</table>

为什么这不能正常工作？

Answer 1

如前所述，你有一个错误：

#pass a{
    visibility:hidden;
}
#pass a:hover{
    visibility:visible;
    }

然而还有另一个错误。元素消失后，悬停不会触发。你想要兄弟选择器：

#pass:hover > a

Demo

Answer 2

#pass.a{正在寻找id="pass" class="a"

的元素

你想要

#pass a {和 #pass a:hover {选择a作为id="pass"

元素子项的{{1}}

Answer 3

#pass.a表示元素，其中id = pass，class = a 。我认为这不是你想要的。

用空格替换点：

#pass a
{
    visibility:hidden;
}

#pass a:hover
{
    visibility:visible;
}

Answer 4

在这里使用.选择器。通常代表一个类选择器。在您的情况下，您需要通过标记选择器#pass a选择元素。

尝试：

#pass a{
    visibility:hidden;
}

#pass a:hover{
   visibility:visible;
}

Answer 5

下面的代码工作正常。

传递{visibility：hidden;}

通过：悬停＆gt;一种{能见度：可见;}