javascript - CSS 悬停代码不起作用

Question

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

<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>

然而，这是行不通的。请提出建议。

Answer 1

悬停时使用 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;
}