javascript - CSS悬停代码不起作用

我试图使鼠标悬停在另一个文本上时显示文本。为此，我正在使用以下代码：

<style>
#para1 {
    visibility:hidden;
}
#p2:hover, #para1 {
    visibility:visible;
}
</style>
</head>
<p id="para1">Hello World!</p>
<p id="p2">This paragraph is not affected by the style.</p>

但是，这不起作用。请提出建议。

最佳答案

在悬停时使用CSS3属性，您可以选择下一个元素，这称为相邻的兄弟选择器，并用加号表示

DEMO

的HTML

<p id="para1">Hello World!</p>
<p id="p2">This paragraph is not affected by the style.</p>

的CSS

p {
    visibility:hidden;
}
#para1 {
    visibility: visible;
}
#para1:hover + p {
    visibility:visible;
}