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

Answer 2

而不是使用可见性尝试按显示操作：

#para1{display:none;}
#p2:hover + #para1{display:block;}

Answer 3

您可以使用一些简单的jQuery（我看到您已在此类别中标记了它）

$('#p2').hover(function() {
$('#para1').show
}, function() {
$('#para1').hide
});

Answer 4

CSS中没有以前的兄弟选择器，因此您必须使用JavaScript。尝试：

$('#p2').hover(
    function(){
        $('#para1').css('visibility','visible')},
    function(){
        $('#para1').css('visibility','hidden')
})

<强> jsFiddle example

Answer 5

试试这两条规则：

p {
    display:none;
}
#para1, #para1:hover + p {
    display: inline;
}

或者这个：

p {
    display:none;
}
#para1, #para1:hover + p {
    display: block;
}

如果取决于你想要什么样的结果。您也可以尝试使用jQuery。

Answer 6

尝试：

#p2:hover #para1{
   visibility:visible;
 }

或：

#para1{
   display :none;
  }
#p2:hover #para1{
   display:block;
  }

CSS悬停代码不起作用

6 个答案: