CSS hover code not working

Question

I am trying to make text appear when mouse hovers over another text. FOr this I am using the following code:

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

This is however not working. Please suggest.

Answer 1

Using CSS3 properties on hover you you can select next element, This is called the adjacent sibling selector, and it is represented by a plus sign

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

Instead of using visibility try operating by display:

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

Answer 3

You could use some simple jQuery (I see you have tagged it in this category)

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

Answer 4

There is no previous sibling selector in CSS, so you'd have to use JavaScript for this. Try:

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

jsFiddle example

Answer 5

Try this 2 rules:

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

or this:

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

If depends what kind of result do you want. You can try with jQuery too.

Answer 6

try:

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

or:

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